Getting a Custom Checkbox to Display Correctly

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?