Skip to content

Instantly share code, notes, and snippets.

@adityasaxena

adityasaxena/index.html

Last active August 29, 2015 14:21
Show Gist options
  • Save adityasaxena/654e00673f5ea5a40d3e to your computer and use it in GitHub Desktop.
Save adityasaxena/654e00673f5ea5a40d3e to your computer and use it in GitHub Desktop.
Download ZIP
Custom Radio Buttons and Checkboxes// source http://jsbin.com/rekiqeqeqi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="style.css" type="text/css" rel="stylesheet" />
<meta charset="utf-8">
<title>Custom Radio Buttons and Checkboxes</title>
</head>
<body>
<h2>Custom Radio Buttons and Checkboxes</h2>
<p>You can either use:
<br/>
1. Font Icons like Font-Awesome or Glyphicons, or
<br/>
2. Custom Images that suit your Radio Buttons or Checkboxes, or
3. you could also use Unicode characters that are present in HTML</p>
<p>In the following example, I have used <strong>Font Awesome</strong>.</p>
<h4>Custom Radio Buttons</h4>
<label>
<input type="radio" name="sweet-radio" id="sweet-radio-1" value="Yes" checked>
<span class="custom-radio-button">
</span>
<span>Sweet Radio 1</span>
</label>
<label>
<input type="radio" name="sweet-radio" id="sweet-radio-2" value="No">
<span class="custom-radio-button">
</span>
<span>Sweet Radio 2</span>
</label>
<label>
<input type="radio" name="sweet-radio-3" id="sweet-radio-3" value="No" disabled checked>
<span class="custom-radio-button">
</span>
<span>Sweet Radio 3</span>
</label>
<h4>Custom Checkboxes</h4>
<label>
<input type="checkbox" id="sweet-check-1"/>
<span class="custom-checkbox-button">
</span>
<span>Sweet Check 1</span>
</label>
<label>
<input type="checkbox" id="sweet-check-2" checked/>
<span class="custom-checkbox-button">
</span>
<span>Sweet Check 2</span>
</label>
</body>
</html>
Raw
style.css
body {
background-color: #eee;
}
/** CHECKBOX CSS **/
input[type="checkbox"] {
display: none;
position: relative;
}
input[type="checkbox"] + .custom-checkbox-button {
margin-right: 11px;
position: relative;
}
input[type="checkbox"] + .custom-checkbox-button:before {
width: 12px;
height: 12px;
display: inline-block;
background: rgba(255, 255, 255, .8);
content: '';
position: absolute;
border-radius: 2px;
left: 2px;
top: 3px;
}
input[type="checkbox"] + .custom-checkbox-button:after {
color: #cfdaed;
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '\f096';
font-size: 20px;
cursor: pointer;
}
input[type="checkbox"]:checked + .custom-checkbox-button {
margin-right: 10px;
display: inline-block;
}
input[type="checkbox"]:checked + .custom-checkbox-button:before {
display: none;
}
input[type="checkbox"]:checked + .custom-checkbox-button:after {
content: '\f14a'; /* This comes from Font Awesome */
color: #1569ad;
}
/** RADIO BUTTON CSS **/
input[type="radio"] {
display: none;
position: relative;
}
input[type="radio"][disabled] + .custom-radio-button:after {
cursor: not-allowed;
}
input[type="radio"][disabled]:checked + .custom-radio-button:after {
content: '\f111';
color: #cfdaed;
}
input[type="radio"]:checked + .custom-radio-button:after {
content: '\f058';
color: #1569ad;
}
input[type="radio"] + .custom-radio-button:after {
color: #cfdaed;
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content: '\f10c';
font-size: 18px;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment