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

SQL: sneak peek

show databases; use mysql; show tables; select * from component; describe component; create database sql_intro; show databases; use sql_intro; create table emp_details (Name varchar(25), Age int, gender char(1), doj date, city varchar(15), salary float); describe emp_details; insert into emp_details  values("Jimmy",35,"M","2005-05-30","Chicago",70000), ("Shane",30,"M","1999-06-25","Seattle",55000), ("Marry",28,"F","2009-03-10","Boston",62000), ("Dwayne",37,"M", "2011-07-12","Austin", 57000), ("Sara",32,"F","2017-10-27","New York",72000), ("Ammy",35,"F","2014-12-20","Seattle",80000); select * from emp_details; select distinct city from emp_details; select count(name) as count_name from emp_details; select avg(salary) from emp_details; select name, age...
Post a Comment
Read more

SQLSTATE[42S01]: Base table or view already exists: 1050 Table 'users' already exists

While migration to db you often face/might face this error which says the table name that you wrote is already exists in the database. so in that case one of the solutions that you can try is wrapping up your create schema with this: if(!Schema::hasTable('users')){ } Example: if (! Schema :: hasTable ( 'users' )){              Schema :: create ( 'users' ,  function  ( Blueprint   $table ) {                  $table -> bigIncrements ( 'id' );                  $table -> bigInteger ( 'role_id' )-> unsigned ()-> nullable ();                  $table -> foreign ( ' role_id ' )-> references ( 'id' )-> on ( 'roles' ) ...
Post a Comment
Read more