1. 程式人生 > >自定義input radio樣式

自定義input radio樣式

            input[type="radio"]+span::before{
                 content: "\a0";//不換行空格
                 display: inline-block;
                 vertical-align: middle;
                 width: 30px;
                 height: 30px;
                 font-size: 24px;
                 margin-right: 16px;
                 border-radius: 50%;
                 border: 1px solid #5b9bd4;
                 text-indent:.15em;
                 line-height: 1;
             }
             input[type="radio"]:checked+span::before{
                 background: #5b9db4;
                 background-clip: content-box;
                 padding: .2em;
             }
             input[type="radio"]{
                 position: absolute;
                 clip: rect(0,0,0,0);
             }

參考:https://www.cnblogs.com/xinjie-just/p/5911086.html

樣式二:

<input type="radio" name="myRadio" class="radio" /><span>是</span>
<input type="radio" name="myRadio" class="radio" /><span>否</span>
/*public for radio*/
input[type="radio"] + span::before {
  content: "\a0"; /*不換行空格*/
  display: inline-block;
  vertical-align: middle;
  font-size: 18px;
  width: 0.6em;
  height: 0.6em;
  margin-right: .4em;
  border-radius: 50%;
  border: 1px solid #ffb251;
  text-indent: .15em;
  line-height: 1;
  padding: .2em;
}

input[type="radio"]:checked + span::before {
  background-color: #ffb251;
  background-clip: content-box;
  padding: .2em;
}

input[type="radio"] {
  position: absolute;
  opacity: 0;
  z-index: 3;
  width: 30px;
  height: 30px;
}