Skip to content

Instantly share code, notes, and snippets.

@jqadrad

jqadrad/index.html

Last active June 20, 2017 13:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jqadrad/5d8a76d9bb4e6d91c2009a46ad36468a to your computer and use it in GitHub Desktop.
Save jqadrad/5d8a76d9bb4e6d91c2009a46ad36468a to your computer and use it in GitHub Desktop.
Download ZIP
Font-awesome select boxes
Raw
index.html
<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>
Raw
script.js
$( 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();
});
Raw
style.css
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