Remove Circle Button in Radio Button And Use The Label As Picker

by sudheer219

HTML

<ul>
    <li>
        <input type='radio' value='1' name='radio' id='radio1'/>
        <label for='radio1'><span></span>Value 1</label>
    </li>
    <li>
        <input type='radio' value='2' name='radio'  id='radio2'/>
        <label for='radio2'><span></span>Value 2</label>
    </li>
    <li>
        <input type='radio' value='3' name='radio'  id='radio3'/>
        <label for='radio3'><span></span>Value 3</label>
    </li>
</ul>

CSS

ul {
    list-style: none;
}
li {
    display: inline-block;
    margin-right: 15px;
}
input {
    visibility:hidden;
}
label {
    cursor: pointer;
}
input:checked + label span {
  background: red;
}

span{
  display: inline-block;
  width: 18px;
  height:18px;
  border-radius: 50%;
  border: 2px inset #444;
  position:relative;
  top:3px;
  margin-right:4px;
  
  
}