- 网站精华
使用css自定义input单选框样式
简介 开发中，有时候需要改变圆角的单选框， 可能就需要去掉默认的单选框样式，使用自定义的样式。
<p><strong class="ql-size-large">html代码</strong></p><pre class="ql-syntax" spellcheck="false"> <div class="radio">
<input type="checkbox" id="sex1">
<label for="sex1"></label>
男
</div>
<div class="radio">
<input type="checkbox" id="sex2">
<label for="sex2"></label> 女
</div>
</pre><p><br></p><p><br></p><p><span class="ql-size-large">CSS代码</span></p><pre class="ql-syntax" spellcheck="false">radio {
position: relative;
display: inline-block;
margin-right: 12px;
}
.radio input {
width: 15px;
height: 15px;
appearance: none;/*清楚默认样式*/
-webkit-appearance: none;
opacity: 0;
outline: none;
z-index: 8; /*让input层级高于label，使之能选中*/
}
.radio label {
position: absolute;
left: 0;
top: 6px;
width: 15px;
height: 15px;
border: 1px solid #3582E9;
}
.radio input:checked+label::after {
content: "";
position: absolute;
left: 4px;
top: 0px;
/* 这里显示矩形的一半边框再旋转45度来实现对勾样式 */
width: 5px;
height: 12px;
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
transform: rotate(45deg);
}
</pre><p><br></p><p><br></p>
分享到：
转载：
喜欢 1
收藏
上一篇：
css的相关样式(简单特效)
暂无评论信息