使用 CSS 属性选择器为选中的复选框设置样式。 （安卓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>

当我将样式标签放在正文标签的底部时，我确实让属性选择器和同级选择器工作，但只有在复选框的默认设置为选中时。无论如何，一旦用户检查了复选框，就使用 css 设置复选框的样式？还有其他可能有类似效果的方法吗？

谢谢

附： javascript和jquery不能用。

Answer 1

如果复选框被选中，你可以这样做

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

Answer 2

据我所知，checkbox的checked属性对应的是它的defaultChecked DOM属性，而不是checked，并不反映checked状态的变化.所以 CSS 中的 [checked = "checked"] 也不应该反映它，并且与 :checked 伪选择器的含义不同。

你可以尝试使用类似的东西

input.showDetails:not(:checked) ~ .moreInfo {display:none;}

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

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

Answer 3

这是我想出的代码，用于在不使用按钮或其他输入表单且不使用 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>