input type = radio修改样式

2019-10-14  本文已影响0人  匆匆那年_海
1.png
<label class="test-label">
    <input class="test-radio" name="fs" type="radio" value="325" checked>
    <span class="test-radioInput"></span>
    自驾
</label>
<label class="test-label">
    <input class="test-radio" name="fs" type="radio" value="425">
    <span class="test-radioInput"></span>
    上门取车
</label>
.test-label {
  margin: 20px 20px 0 0;
  display: inline-block;
}

.test-radio {
  display: none
}

.test-radioInput {
  background-color: #48A919;
  border-radius: 100%;
  display: inline-block;
  height: 16px;
  width: 16px;
  line-height: 1;
  margin-top: -1px;
  vertical-align: middle;
}

.test-radioInput:after {
  content: "";
  background-color: #fff;
  border-radius: 100%;
  display: inline-block;
  height: 12px;
  margin: 2px;
  width: 12px
}

.test-radio:checked+.test-radioInput:after {
  background-color: #48A919;
}

原文作者:匆匆那年_海,博客主页:https://www.jianshu.com/u/910c0667c515
95后前端汉子,爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。

上一篇下一篇

猜你喜欢

热点阅读