Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Custom Radio</title>
</head>
<body>
<div class="set-appointment-container">
  <input id="appointment-yes" type="radio" name="set-appointment" value="yes" />
  <label class="yes-label" for="appointment-yes"></label> 
  <input id="appoinment-no" type="radio" name="set-appointment" value="no" />
  <label class="no-label" for="appoinment-no"></label>
</div>
</body>
</html>
 
input[type=radio] {  
    display: none;  
}
​
.set-appointment-container {
  /* width: 64px; */
  display: inline-block;
}
​
label {  
    display: inline-block;
    width: 32px;
    height: 29px;
    cursor: pointer;  
    position: relative;  
}  
​
.yes-label:hover:before { 
  background-color: blue;
} 
​
.no-label:hover:before {
  background-color: pink;
}
​
input[id="appointment-yes"]:checked + label:before {
    text-align: center;
    content: "Y";
    width: 32px;
    height: 29px;
    background-color: #45ce4c;
} 
​
input[id="appoinment-no"]:checked + label:before {
    text-align: center;
    content: "N";
    width: 32px;
    height: 29px;
    background-color: red;
}  
​
.yes-label:before {  
    content: "Y";  
    text-align: center;
    display: inline-block;  
  
    width: 32px;  
    height: 29px;  
  
    position: absolute;    
    background-color: #cccccc;  
}  
​
.no-label:before {  
    content: "N"; 
    text-align: center;
    display: inline-block;  
  
    width: 32px;  
    height: 29px;  
  
    position: absolute;  
    background-color: #cccccc;  
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
freannrakpro
0viewers