使用CSS属性选择器来设置复选框的样式。 （Android GMAIL）

Question

我正在使用电子邮件模板，并且在尝试使用复选框来显示框（托管于Android的Gmail客户端）时显示附加信息。我目前有一个工作设置，使用带焦点的按钮将内容的显示更改为内联。一旦用户点击按钮上的焦点，附加信息就会返回到显示：无。按钮配置

button.showDetails:focus + .moreInfo {display:inline!important;} //Toggles content on when focused to display moreInfo. 

<button type="button" class ="showDetails" style ="//display:none; /* background:whitesmoke; outline:none; border:none; width:0px; height:0px;*/">Leasing Terms</button> <!!--Hide Button for GMAIL by styling CSS. Reveal in others with body CSS.--> 

<table class ="moreInfo" width="240px" cellspacing="0" cellpadding="0" border="0" style ="display:none;"> 
    <tr> 
     <td width="50%" align="center" style="font-size:.7em;">$269 a month lease for 36 months. 12,000 miles per year. $2,000 due at signing and no security deposit required. On approved credit. An extra charge may be imposed at the end of the lease term due to mileage overage. Price plus tax, title, and license.</td> 
    </tr>               
</table> 

的

示例代码根据活动监控https://www.campaignmonitor.com/css/ Android版Gmail不支持：focus伪选择。作为解决Android GMAIL的工作，我尝试使用复选框并使用属性选择器和常规兄弟选择器的组合。是否可以使用属性选择器来设置复选框的样式，或者在复选框被选中的情况下，该复选框的同级是否可用？

下面是复选框的示例。

<style> 
    input.showDetails[checked = "checked"] ~ .moreInfo {-webkit-display:inline!important;} 
</style> 
<input class= "showDetails" type="checkbox" >Disclaimer 
         <button type="button" class ="showDetails" style =" width:100%;display:none; /* background:whitesmoke; outline:none; border:none; width:0px; height:0px;*/">New Vehicles Disclaimer</button> <!!--Hide Button for GMAIL by styling CSS. Reveal in others with body CSS.-->  
         <p class="moreInfo" style="display:none">All prices plus tax, title, license, and doc fee. See dealer for details</p> 

我没有当我把风格标签在body标签的底部获得属性选择和兄弟选择工作，但只有当设置的复选框默认为选中。无论如何，使用CSS风格的复选框，一旦它已被用户检查？任何其他可能具有类似效果的方法？

谢谢

P. JavaScript和jQuery不能使用。

Answer 1

这里是我想出的代码，以显示焦点上的其他内容，而不使用按钮或其他输入形式，并没有JavaScript。它工作得很好。除了仅显示android gmail的所有信息之外，我没有找到任何解决方案。我在span标签上使用了tabindex属性，所以它会得到类似于输入元素的焦点。

/*Toggles content on when focused to display moreInfo.*/ 
.showDetails:focus + table.moreInfo { 
      display:inline!important; 
} 

.buttonStyle:hover { 
     background-color: #215ace; 
     cursor: pointer; 
    } 



<span tabindex="50" class="showDetails displayButton" style="outline:none; //display:none;" > 
     <table class="buttonStyle" width="80%" height="20px" bgcolor="#022b7f" style ="background-image: url(Links/Highlight-Button.png); background-repeat:repeat-x; color:#ffffff; border-radius:10px; border-style:outset; border-width:1px; border-color:navy;"> 
      <tr> 
       <td align="center"><span>New Vehicle Disclaimer</span></td> 
      </tr> 
     </table> 
</span> 
<table class="moreInfo" width="100%" bgcolor="lightblue" style="display:none;"> 
     <tr> 
      <td>All prices plus tax, title, license, and doc fee. See dealer for details</td> 
     </tr> 
</table> 

Answer 2

如果复选框被选中，你可以做到这一点

.showDetails:checked { 
    margin-top:2%; 
} 

Answer 3

据我所知，该复选框的checked属性相当于其defaultChecked DOM属性，而不是checked，并不能反映更改checked状态。因此，在CSS中的[checked = "checked"]也不应该反映它，并且具有与:checked伪选择器不同的含义。

你可以尝试使用类似

input.showDetails：没有（：选中）〜.moreInfo {显示：无;}

，将隐藏在邮件程序的细节同时支持:not()和:checked选择器（根据活动监视器，Android 4 Gmail至少支持第一个），回落到不支持其中任何一个的程序中始终可见的细节。

或者，您可以尝试HTML5 detail元素，其中基于WebKit的产品中有rather good support元素（我期望基于Android Web组件的产品应该支持它）。