Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
CSS3 custom radio button
input[type=radio] {
display: none;
& + label {
position: relative;
padding-left: 24px;
cursor: pointer;
&::after {
position: absolute;
content: '';
top: 50%;
left: 0;
display: block;
&::before {
width: 18px;
height: 18px;
margin-top: -9px;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 50%;
&:checked + label::after {
left: 5px;
width: 8px;
height: 8px;
margin-top: -4px;
background-color: #000;
border-radius: 50%;
= f.radio_button :hoge, :yes
= f.label :hoge, 'hoge yes', value: :yes
= f.radio_button :hoge, :no
= f.label :hoge, 'hoge no', value: :no
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.