Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <input id="radio1" class="radio" name="radio" type="radio"/>
  <label for="radio1">单选按钮1</label>
  <input id="radio2" class="radio" name="radio" type="radio"/>
  <label for="radio2">单选按钮2</label>  
</body>
</html>
 
.radio {
  position: relative;
  height: 50px;
  width: 50px;
  vertical-align: middle;
  border: none;
  background: 0 0;
  -webkit-appearance: none;
  outline: none;  
}
.radio::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 30px;
  width: 30px;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 15px;
}
.radio::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display:none;  
  height: 18px;
  width: 18px;
  margin: auto;
  border-radius: 9px; 
  background: blue;
}
.radio:checked::after {
  display:block;
}
Output

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

Dismiss x