Created
September 1, 2017 08:44
-
-
Save jitsejan/8588f86de4b24822292b12e3d03df80f to your computer and use it in GitHub Desktop.
Font Awesome select boxes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<head> | |
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> | |
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> | |
<script type="text/javascript" src="script.js"></script> | |
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> | |
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css"> | |
<link rel="stylesheet" type="text/css" href="style.css"> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="row"> | |
<h1>Drinks</h1> | |
<div class="input-group col-md-12"> | |
<input id="coffee_cb" type="checkbox" class="coffee drink_cb" checked /> | |
<label for="coffee_cb"></label> | |
<input id="wine_cb" type="checkbox" class="wine drink_cb" checked /> | |
<label for="wine_cb"></label> | |
</div> | |
</div> | |
<div class="row"> | |
<h1>Selected filter</h1> | |
<table> | |
<tr> | |
<th>Coffee</th> | |
<td id="filterValCoffee"></td> | |
</tr> | |
<tr> | |
<th>Wine</th> | |
<td id="filterValWine"></td> | |
</tr> | |
</table> | |
</div> | |
</div> | |
</body> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$( document ).ready(function() { | |
function setItemValues() { | |
$("#coffee_cb").is(":checked") ? coffeeCheck = 'Yes' : coffeeCheck = 'No'; | |
$("#wine_cb").is(":checked") ? wineCheck = 'Yes' : wineCheck = 'No'; | |
$('#filterValCoffee').html(coffeeCheck); | |
$('#filterValWine').html(wineCheck); | |
} | |
$('.drink_cb').change(function() { | |
setItemValues(); | |
}); | |
setItemValues(); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 30px; | |
} | |
input[type=checkbox] { | |
display: none; | |
} | |
input[type=checkbox] + label { | |
color: black; | |
font-size: 28px; | |
} | |
input[type=checkbox] + label:before { | |
font-family: FontAwesome; | |
display: inline-block; | |
width: 50px; | |
height: 50px; | |
padding: 2px; | |
background-color: white; | |
text-align: center; | |
-webkit-border-radius: 50%; | |
-moz-border-radius: 50%; | |
border-radius: 50%; | |
border: black 2px solid; | |
margin: 5px; | |
} | |
input[type=checkbox].coffee + label:before { | |
content: "\f0f4"; | |
} | |
input[type=checkbox].wine + label:before { | |
content: "\f000"; | |
} | |
input[type=checkbox]:checked + label:before { | |
color: white; | |
background-color: black; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment