Getting a Custom Checkbox to Display Correctly - css

Question

I am planning a page with about 20 or more checkboxes and I want to use a particular style of custom checkbox to match other things in other places on the website. Essentially, the aim is for an unchecked box to look like this
and the checked version will be coloured. At the moment I can colour the icon and the text but I'm drawing a blank with the border.
The HTML and PHP code is this:
<?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 }?>
The CSS is this:
.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}
Obviously I need a third line under the checked state with
.amenity {border:1px solid #007aba}
but how do I invoke it only when the input is checked?

Answer 1

Considering basic documentation on html element :
The tag defines a label for an element.
The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.
The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control.
The for attribute of the tag should be equal to the id attribute of the related element to bind them together.
EDIT :
The idea of your question is : "Can I apply a CSS property depending on the child state ?".
The answer is NO. It is impossible, and it has been answered many times on Stack Overflow already.
Thus, there are two mains solutions :
1) Use Javascript !
I too prefer making beautiful CSS solutions all the time, but in your case, javascript solves the problem in a second with any framework.
For instance in AngularJS but don't import this MVC for that, go for native javascript or the framework you are using:
ng-style="{'border' : disabled ? '1px solid red' : '1px solid blue'}"
Pros : Very fast, very simple, don't change your html structure at all.
Cons: Some people may feel dishonoured not succeeding in doing a pure CSS solution.
2) A CSS trick.
I just did one, you can see it on this fiddle. The idea was to create a sibling .absolute positioned div with the dimensions of the .amenity div, remove the border of the .amenity div and then apply it to absolute div.
As it is a sibling, we don't have the parent problem anymore and the trick is done.
Pros : Fast and understandable too, pure CSS solution.
Cons : You can use width 100%, but the height need to be hardcoded somehow. If you use SASS, it can be okay, but if the height of your icon or font change with the screen dimension, you'll need to use media queries or just put every height in em.
Don't forget to remove some pixels to height and width to keep some place for the border pixels !
Absolute div class :
.amenity .borderer {width : 100%; position: absolute; top: 0; left : 0; height : calc(37px - 4px); width : calc(100% - 2px); border:1px solid #ccc;}
Border change :
.amenity input:checked ~ div{border:1px solid #007aba}
New 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>