Skip to content

Instantly share code, notes, and snippets.

@webinista

webinista/radio-buttons.css

Created December 16, 2014 05:44
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 webinista/714c33447c916278899a to your computer and use it in GitHub Desktop.
Save webinista/714c33447c916278899a to your computer and use it in GitHub Desktop.
Download ZIP
Custom radio buttons
Raw
radio-buttons.css
input[type=radio].fancy-rb {
color: #c09 !important;
border: 1px solid #0c0 !important;
}
input[type=radio].fancy-rb {
opacity: 0;
}
input[type=radio].fancy-rb + label::before,
input[type=radio].fancy-rb + label::after {
content: ' ';
cursor: pointer;
display: block;
border-radius: 100%;
position: absolute;
left: -53px;
top: 5px;
}
input[type=radio].fancy-rb + label::before {
width: 20px;
height: 20px;
border: 1px solid #E6E6E6;
top: 7px;
}
input[type=radio].fancy-rb:checked + label::after {
background: #a2c513;
border-radius: 100%;
left: -49px;
height: 14px;
top: 11px;
width: 14px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment