Mon - Sun 8.00 AM - 8.00 PM
[email protected]
Home
Articles
Our Courses
HTML 5
CSS
JavaScript
MySql
PHP
Laravel
Bootstrap
Our Tutorials
PHP
JavaScript
HTML
Laravel
MySQL
JQuery
CSS
Git
Bootstrap
Vue JS
Android
Ui Code Snippets
Chat Box
Range Slider
Radio Button
Select Box
Nav Bar
Other
Testimonial
Carousel
Logo
Loader
Lightbox
Login Form
Modals
OTP Verification Form
Popular Notes
HTML
CSS
JavaScript
SQL
Services
About
Contact Us
Ui Code
Snippets
Colored radio button
HTML
CSS
JS
Output
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- bootstrap 5 CDN and css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <!-- google font and font awesome CDN --> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Roboto&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Colored radio buttons</title> </head> <body> <div class="row"> <div class="col-md-8 offset-md-2"> <div class="mainDiv"> <div class="container"> <h1 class="rangeSliderHeading">Colored radio buttons</span></h1> <div class="divider"></div> <div class="flex-container"> <form name="colorSelectorForm"> <input type="radio" name="colorSelector" id="radio-pink" value="pink" /> <label for="radio-pink"><i class="material-icons">color_lens</i>Pink</label> <input type="radio" name="colorSelector" id="radio-indigo" value="indigo" /> <label for="radio-indigo"><i class="material-icons">color_lens</i>Indigo</label> <input type="radio" name="colorSelector" id="radio-cyan" value="cyan" /> <label for="radio-cyan"><i class="material-icons">color_lens</i>Cyan</label> <input type="radio" name="colorSelector" id="radio-teal" value="teal" checked /> <label for="radio-teal"><i class="material-icons">color_lens</i>Teal</label> <input type="radio" name="colorSelector" id="radio-lime" value="lime" /> <label for="radio-lime"><i class="material-icons">color_lens</i>Lime</label> <input type="radio" name="colorSelector" id="radio-deep-orange" value="deep_orange" /> <label for="radio-deep-orange"><i class="material-icons">color_lens</i>Deep Orange</label> </div> </form> </div> </div> </div> </div> </body> </html>
CSS
body { overflow: hidden; } .mainDiv { display: flex; justify-content: center; align-items: center; height: 100vh; } .container { position: relative; margin: auto; width: 700px; height: fit-content; padding: 10px 20px 20px 20px; background-color: #fff; border: 2px solid #e0dfdf; border-radius: 25px; } .rangeSliderHeading { color: rgb(6, 2, 114); border-bottom: 1px solid rgb(180, 180, 180); padding-bottom: 1rem; text-align: center; } .flex-container { width: 100%; min-height: fit-content; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 20px 0; } i { display: inline; vertical-align: middle; } /* Radio Button */ input[type="radio"] { position: relativ; display: none; } input[type="radio"]+label { margin: 8px; padding: 10px; border-radius: 25px; position: relative; } input[type="radio"]#radio-pink+label { background-color: #FCE4EC80; color: #E91E63; } input[type="radio"]#radio-indigo+label { background-color: #E8EAF680; color: #3F51B5; } input[type="radio"]#radio-cyan+label { background-color: #E0F7FA80; color: #00BCD4; } input[type="radio"]#radio-teal+label { background-color: #E0F2F180; color: #009688; } input[type="radio"]#radio-lime+label { background-color: #F9FBE780; color: #CDDC39; } input[type="radio"]#radio-deep-orange+label { background-color: #FBE9E780; color: #FF5722; } /*hover, checked, focus*/ input[type="radio"]#radio-pink:hover+label, input[type="radio"]#radio-pink:checked+label, input[type="radio"]#radio-pink:focus+label { cursor: pointer; background-color: #E91E63; color: #FFFFFF; } input[type="radio"]#radio-indigo:hover+label, input[type="radio"]#radio-indigo:checked+label, input[type="radio"]#radio-indigo:focus+label { cursor: pointer; background-color: #3F51B5; color: #FFFFFF; } input[type="radio"]#radio-cyan:hover+label, input[type="radio"]#radio-cyan:checked+label, input[type="radio"]#radio-cyan:focus+label { cursor: pointer; background-color: #00BCD4; color: #FFFFFF; } input[type="radio"]#radio-teal:hover+label, input[type="radio"]#radio-teal:checked+label, input[type="radio"]#radio-teal:focus+label { cursor: pointer; background-color: #009688; color: #FFFFFF; } input[type="radio"]#radio-lime:hover+label, input[type="radio"]#radio-lime:checked+label, input[type="radio"]#radio-lime:focus+label { cursor: pointer; background-color: #CDDC39; color: #FFFFFF; } input[type="radio"]#radio-deep-orange:hover+label, input[type="radio"]#radio-deep-orange:checked+label, input[type="radio"]#radio-deep-orange:focus+label { cursor: pointer; background-color: #FF5722; color: #FFFFFF; }
JS
Output