使用 -webkit-appearance: none;border-radius: 0; outline: 0; 更改单选框radio-复选框checkbox去掉默认样式,然后自己定义自己想要的单选框radio-复选框checkbox新样式,同时给他们添加点击新的点击效果。
最后样式如上所述...
<title>消除表单自定义样式自己定义样式</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
p {
position: relative;
margin-left: 40px;
}
/* 消除原有样式样子 */
input {
/* 将样式去掉了... */
/* iphone及ipad下输入框button,input,textarea默认内阴影 */
-webkit-appearance: none;
}
input {
border-radius: 0;
outline: 0;
}
/* 自定义复选框 */
input[type="checkbox"] {
width: 16px;
height: 16px;
border: 1px solid #ccc;
}
.gou {
display: none;
position: absolute;
left: 3px;
top: 5px;
width: 10px;
height: 5px;
border-width: 0px 0px 2px 2px;
border-style: solid;
border-color: #333;
transform: rotate(-45deg);
}
input[type="checkbox"]:checked~.gou {
display: block;
}
/* 自定义单选框 */
input[type="radio"] {
width: 16px;
height: 16px;
border: 1px solid #ccc;
border-radius: 50%;
}
.quan {
display: none;
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #8b76f9;
box-shadow: 0px 0px 3px 0px #8b76f9 inset;
}
input[type="radio"]:checked+.quan {
display: block;
}
</style>
</head>
<body>
<div class="contanier">
<p>
<input type="checkbox" name="" id="">
<!-- 自定义勾选 -->
<em class="gou"></em>
</p>
<p>
<!-- 自定义圈圈样式 -->
<input type="radio" name="sex" id="">
<em class="quan"></em>
</p>
<p>
<!-- 自定义圈圈样式 -->
<input type="radio" name="sex" id="">
<em class="quan"></em>
</p>
</div>
</body>