input单选框美化——自定义样式

Posted ao-min

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了input单选框美化——自定义样式相关的知识,希望对你有一定的参考价值。

方法一:

给input添加

-webkit-appearance: none;

隐藏默认样式。然后添加自己的样式就好了。

例如:

技术图片
.radioBox input{
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    padding: 0;
    background-color: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 50%;
    outline: none;
    margin-right: 22px;
    cursor: pointer;
}
技术图片

 

 选中时的样式:

.radioBox input:checked{
    background: url(‘../img/checkBox_selected.png‘) no-repeat center;
}

 

效果:

技术图片

 

方法二:

添加label,给label添加样式,隐藏input

html

技术图片
<div class="radioBox">
  <input type="radio" value="yes" name="reserve" id="radio_yes">
  <label for="radio_yes">是</label>
  <input type="radio" value="no" name="reserve" id="radio_no">   <label for="radio_no">否</label> </div>
技术图片

css

技术图片
.radioBox input{
   display: none;
}
.radioBox label{
    cursor: pointer;
    position: relative;
}
.radioBox label::before{
    display: inline-block;
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(193, 200, 211, 1);
    margin-right: 6px;
    vertical-align: middle;
}
/* 选中 */
.radioBox input:checked+label::after{
    display: inline-block;
    content: "";
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: absolute;
    left: 4px;
    bottom: 4px;
    background-color: rgba(56, 85, 127, 1);
}
技术图片

 

效果:

技术图片

 

以上是关于input单选框美化——自定义样式的主要内容,如果未能解决你的问题,请参考以下文章

input标签的美化

关于小程序radio单选框单击打勾再击取消

js自定义修改复选框单选框样式,清除复选框单选框默认样式

自定义单选框,复选框样式

自定义_单选按钮和复选框_样式

使用纯css3自定义单选框radio和复选框checkbox