获取自定义复选框以正确显示

Question

我正在计划一个包含大约20个或更多复选框的页面，我想使用特定样式的自定义复选框来匹配网站上其他位置的其他内容。基本上，目标是使未经检查的框看起来像这样

并且已检查的版本将被着色。目前我可以为图标和文字上色，但我正在画一个带边框的空白。

HTML和PHP代码是这样的：

<?php foreach ($amenity_array as $key => $value) {?>
<label class="amenity">
<input name="<?php echo $key ?>" type="checkbox" value="<?php echo $key ?>"><i class="icon-<?php echo $key ?>"></i><span><?php echo $value ?></span>
</label>
<?php }?>

CSS就是这样：

.amenity{position:relative;border:1px solid #ccc;color:#ccc;padding:.25em;width:14.5em;margin:0 .5em .5em 0;float:left;white-space:nowrap;overflow:hidden; cursor:pointer}
.amenity input{z-index:-1;opacity:0;width:0}
.amenity i{color:#ccc}
/* Hover and focus states */
.amenity:hover input ~ i{color:#3498db}

/* Checked state */
.amenity input:checked ~ i{color:#5470a3}
.amenity input:checked ~ span{color:#007aba}

显然我需要在检查状态下使用

的第三行

.amenity {border:1px solid #007aba}

但是只有在检查输入时我该怎么调用它？

Answer 1

考虑basic documentation on html element：

  

标签定义元素的标签。

     

该元素不会呈现为用户的任何特殊内容。但是，它为鼠标用户提供了可用性改进，因为如果用户单击元素中的文本，它将切换控件。

     

该元素不会呈现为用户的任何特殊内容。但是，它为鼠标用户提供了可用性改进，因为如果用户单击元素中的文本，它将切换控件。

     

标记的for属性应该等于相关元素的id属性以将它们绑定在一起。

编辑：

您的问题的想法是：＆＃34;我可以根据子状态应用CSS属性吗？＆＃34;。

答案是否。这是不可能的，并且已经在Stack Overflow上多次回答。

因此，有两个主电源解决方案：

1）使用Javascript！

我也更喜欢一直使用漂亮的CSS解决方案，但在您的情况下，javascript会在任何框架中解决问题。

例如在AngularJS中但是没有为此导入此MVC，请使用本机javascript或您正在使用的框架：

ng-style="{'border' : disabled ? '1px solid red' : '1px solid blue'}"

优点：非常快，非常简单，根本不会改变你的html结构。

缺点：有些人可能会因为没有成功完成纯CSS解决方案而感到羞辱。

2）CSS技巧。

我刚做了一个，你可以在fiddle上看到它。我的想法是创建一个兄弟.absolute定位div与.amenity div的尺寸，删除.amenity div的边框，然后将其应用于绝对div。

因为它是一个兄弟姐妹，我们不再有父母问题而且诀窍已经完成。

优点：快速且易懂，纯CSS解决方案。

缺点：您可以使用宽度100％，但高度需要以某种方式硬编码。如果你使用SASS，它可以没问题，但如果你的图标或字体的高度随着屏幕尺寸的变化而变化，你需要使用媒体查询或者只是将每个高度放在em中。

不要忘记删除一些高度和宽度的像素，以保留边框像素的某个位置！

绝对div类：

.amenity .borderer {width : 100%; position: absolute; top: 0; left : 0; height : calc(37px - 4px); width : calc(100% - 2px); border:1px solid #ccc;}

边境变化：

.amenity input:checked ~ div{border:1px solid #007aba}

新HTML：

<div class="amenity">
  <label>
    <input name="disabled" type="checkbox" value="disabled"><i 
    class="icon">D </i><span>Disabled Access</span>
    <div class="borderer">

   </div>
  </label>

</div>