使用CSS属性选择器设置复选框的样式。(Android GMAIL)
我正在使用一个电子邮件模板，当复选框被选中时，我尝试使用复选框来显示附加信息(对于android客户端)。我目前有一个工作设置，它使用带有焦点的按钮将内容的显示更改为内联。一旦用户单击焦点关闭按钮，附加信息将返回显示:无。
按钮配置示例代码
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不支持:焦点伪选择器。作为android的一项工作，我尝试使用一个复选框，并使用属性选择器和普通同胞选择器的组合。是否可以使用属性选择器来设置复选框的样式，或者在本例中，如果选中复选框，则使用该复选框的同级复选框吗？
下面是复选框的示例。
<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来样式复选框吗？还有其他可能产生类似效果的方法吗？
谢谢
附注：不能使用javascript和jquery。
回答 3
Stack Overflow用户
发布于 2014-09-17 00:47:15
下面是我想出的代码，它可以在焦点上显示额外的内容，而无需使用按钮或其他输入表单，而不使用javascript。它工作得很好。除了显示android的所有信息外，我没有找到任何解决方案。我在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>Stack Overflow用户
发布于 2014-09-03 19:59:58
如果选中了复选框，则可以这样做。
.showDetails:checked {
margin-top:2%;
}Stack Overflow用户
发布于 2014-09-03 22:06:56
据我所知，复选框的checked属性对应于它的defaultChecked DOM属性，而不是checked，并不反映checked状态的变化。因此，CSS中的[checked = "checked"]也不应该反映它，它的含义与:checked伪选择器不同。
你可以试着用这样的方法
input.showDetails:not(:checked) ~ .moreInfo {display:none;}
这将在同时支持:not()和:checked选择器的邮件程序中隐藏细节(据竞选监视器显示，Android4Gmail至少支持第一个)，回到不支持任何一个Gmail的程序中总是可见的细节。
或者，您也可以尝试HTML5 detail element，它在基于WebKit的产品中有相当好的支持 (我希望基于Android组件的产品应该支持它)。
https://stackoverflow.com/questions/25652418
复制相似问题
腾讯云开发者
