html 自定义input样式,使用CSS3实现input多选框自定义样式的方法示例

原理：首先把input元素隐藏掉，然后用CSS设置label元素(其他元素也可以)的样式，选中时的样式使用input:check+label选中label，无须使用图片和JS

效果预览

html代码

男

女

CSS代码

.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);

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。