-
-
Save lenards/e3076781cd99f3eda2d2f70c890e5b88 to your computer and use it in GitHub Desktop.
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
/* Styles for hiding the native radio button */ | |
input[type='radio'].check-custom { | |
top: 0; | |
left: 0; | |
width: 0; | |
height: 0; | |
opacity: 0; | |
filter: alpha(opacity=0); | |
position: absolute; | |
visibility: hidden; | |
} | |
/* Styles for the basic appearance of the custom radio button */ | |
input[type='radio'].check-custom ~ .check-toggle { | |
width: 1rem; | |
height: 1rem; | |
position: relative; | |
display: inline-block; | |
vertical-align: middle; | |
border: 1px solid #969696; | |
border-radius: 50%; | |
cursor: pointer; | |
} | |
/* Styles for the hover state appearance of the custom radio button */ | |
input[type='radio'].check-custom:hover ~ .check-toggle { | |
border: 2px solid #4a4a4a; | |
} | |
/* Styles for the checked state appearance of the custom radio button */ | |
input[type='radio'].check-custom:checked ~ .check-toggle { | |
border: 2px solid #1785ff; | |
} | |
/* Styles for the checked state appearance of the custom radio button */ | |
input[type='radio'].check-custom:checked ~ .check-toggle::after { | |
content: ''; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
width: 40%; | |
height: 40%; | |
margin: auto; | |
position: absolute; | |
border-radius: 30%; | |
background: #1785ff; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment