更改单选按钮的外观

Question

我确信之前有人问过这个问题，但我正在寻找一种非常具体的方式来设置单选按钮的样式。 这是我目前拥有的fiddle

 <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>