自定义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

样式二:


/*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;
}

 

你可能感兴趣的:(自定义input radio样式)