更改单选按钮的外观

Question

我可以肯定已经问过这个问题，但是我正在寻找一种非常特定的方式来设置单选按钮的样式。 这里是小提琴的什么我现在有

 <label for="pretty">
    <input type="radio" value="pretty" name="quality" id="pretty"> <span>pretty</span>
  </label>

  <label for="accessible-and-pretty">
    <input type="radio" value="pretty"  name="quality" id="accessible-and-pretty" checked> <span>accessible and pretty</span>
  </label>

我的问题是如何获得附加的图像外观？

我无法弄清楚如何缩小绿色区域，或者是否需要做一些其他事情来实现这一目标

Answer 1

随时更改颜色，渐变和大小以符合您的要求。

 .container { width: 100px; margin: 0 auto; } .radio-grp { margin-bottom: 10px; } input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; height: 0; width: 0; } input[type="radio"] + label { display: inline-block; position: relative; height: 30px; width: 30px; border-radius: 100%; background-color: #fff; border: 1px solid #ddd; } input[type="radio"] + label, .radio-txt { cursor: pointer; } label.radio-txt { display: inline-block; float: right; padding-top: 5px; } input[type="radio"] + label:before { content: ''; position: absolute; height: 22px; width: 22px; border-radius: 100%; top: 4px; left: 4px; box-shadow: 4px 5px 10px 0px #ccc inset; } input[type="radio"] + label:after { content: ''; position: absolute; height: 10px; width: 10px; border-radius: 100%; top: 10px; left: 10px; transition: background 0.1s linear; } input[type="radio"]:checked + label:after { background-color: #888888; } 

 <div class="container"> <div class="radio-grp"> <input type="radio" name="demo" value="1" id="radio1" checked> <label for="radio1"></label> <label for="radio1" class="radio-txt">Demo 1</label> </div> <div class="radio-grp"> <input type="radio" name="demo" id="radio2" value="2"> <label for="radio2"></label> <label for="radio2" class="radio-txt">Demo 2</label> </div> <div class="radio-grp"> <input type="radio" name="demo" id="radio3" value="3"> <label for="radio3"></label> <label for="radio3" class="radio-txt">Demo 3</label> </div> </div>