Skip to main content

How to add custom styles to radio button using CSS

 In your html file write:

<!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">
    <title>Custom Radio Button Design</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="form-group">
         <label for="gender" class="text-light">Gender</label>
         <div class="radio inline">
             <input type="radio" id="radio-2" name="gender" value="Male">
             <label for="radio-2" class="radio-label">Male</label>
         </div>
         <div class="radio inline">
             <input type="radio" id="radio-3" name="gender" value="Female">
             <label for="radio-3" class="radio-label">Female</label>
         </div>
     </div>

     <div class="form-group">
         <label for="gender" class="text-light">Status</label>
         <div class="radio inline">
              <input type="radio" id="radio-4" name="status" value="Active">
              <label for="radio-4" class="radio-label">Active</label>
         </div>
         <div class="radio inline">
              <input type="radio" id="radio-5" name="status" value="Inactive">
            <label for="radio-5" class="radio-label">Inactive</label>
         </div>
     </div>
</body>
</html>


 Then in your style.css file write: 

.form-group .radio
{
    margin: 1em 2em;
}

/* adding style to radio buttons */

.radio input[type="radio"]
{
    position: absolute;
    opacity:0;
}

.radio input[type="radio"] + .radio-label:before{
    content: "";
    background:var(--border-btn);
    border-radius: 100%;
    border: 1px solid var(--border);
    display: inline-block;
    width: 1em;
    height: 1em;
    position: relative;
    top: -0em;
    margin-right: .5em;
    vertical-align: top;
    text-align: center;
    -webkit-transition: all 250ms ease;
    transition: all 250ms ease;
}

.radio input[type="radio"]:checked + .radio-label:before{
    background-color: #16db93;
    box-shadow: inset 0 0 0 4px #e9ecef;
}

.radio input[type="radio"]:focus + .radio-label:before{
    outline: none;
    border-color: #16db93;
}

.radio input[type="radio"]:disabled + .radio-label:before{
    box-shadow: inset 0 0 0 4px #e9ecef;
    border-color: #b4b4b4;
    background: #b4b4b4;
}

Comments

Post a Comment

Popular posts from this blog

Laravel Vuejs Basic Setup

In this article we will see how to setup vue with laravel. 1) Create a laravel project: laravel new laravue 2) In web.php create a temporary route:  Route :: get ( '/test' ,  function  () {      return   view ( 'welcome' ); }); So, when you will see the welcome page once you hit the  http://laravue.test/test  url. 2) In terminal run:  npm install 3) npm install vue (In package.json file you will see that vue dependency has been added successfully) 4) Now go to resources -> js -> app.js file. Here we will have to load the vue. write the following lines in app.js.  require ( './bootstrap' ); window . Vue  =  require ( 'vue' ); const   app  =  new   Vue ({      el :   '#app' }); (Here, vue js will execute and control anything that will be inside the app id. So, for our example  let's put the app id inside the welcome view). So, inside welcome.blade.php 's body...
Post a Comment
Read more