改变单选按钮的外观

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

随意更改颜色，渐变和尺寸以符合您的要求。

＆＃13;

＆＃13;

$file="test2.txt"
Rename-Item $file ('{0:yyyyMMdd.hhmm}-{1}' -f (Get-Date), $file)

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;