前言
在前端应用中,原生的图片选择框,单选框和多选框样式比较单一。
如下图所示:
那么如果想要实现比较丰富的选择框样式,应该如何去复写样式昵,本文通过伪元素 :before 和 :after 实现各种好看的选择框。
如下图所示:
图片选择框样式
/*以下样式的结合设置成文件选择框*/
#container > #add {
border: 1px solid #ddd;
position: relative;
top: 50%;
left: 10%;
width: 200px;
height: 200px;
transform: translate(-50%, 10%);
}
#container > #add:before {
background: #ddd;
content: "";
width: 100px;
height: 5px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
#container > #add:after {
background: #ddd;
content: "";
width: 5px;
height: 100px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
单选框样式
/*以下样式的结合设置单选框*/
#container > #radio {
border: 1px solid #ddd;
position: relative;
top: 50%;
left: 10%;
width: 100px;
height: 100px;
transform: translate(-50%, 10%);
margin-top: 50px;
background: #03A9F4;
border-radius: 50%;
}
#container > #radio:before {
background: #fff;
content: "";
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
多选框样式
/*以下样式的结合设置多选框*/
#container > #checkbox{
border: 1px solid #ddd;
position: relative;
top: 50%;
left:10%;
width: 100px;
height: 100px;
transform: translate(-50%,10%);
margin-top: 50px;
background: #03A9F4;
border-radius: 10px;
}
#container > #checkbox:before{
background: #fff;
content: "";
width: 30px;
height: 5px;
position: absolute;
top: 60%;
left: 18%;
transform: rotate(45deg);
}
#container > #checkbox:after{
background: #fff;
content: "";
width: 5px;
height: 60px;
position: absolute;
top: 20%;
transform: rotate(45deg);
left: 60%;
}
完整代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>React</title>
</head>
<style>
body {
margin-left: 50px;
}
/*以下样式的结合设置成文件选择框*/
#container > #add {
border: 1px solid #ddd;
position: relative;
top: 50%;
left: 10%;
width: 200px;
height: 200px;
transform: translate(-50%, 10%);
}
#container > #add:before {
background: #ddd;
content: "";
width: 100px;
height: 5px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
#container > #add:after {
background: #ddd;
content: "";
width: 5px;
height: 100px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
/*以下样式的结合设置单选框*/
#container > #radio {
border: 1px solid #ddd;
position: relative;
top: 50%;
left: 10%;
width: 100px;
height: 100px;
transform: translate(-50%, 10%);
margin-top: 50px;
background: #03A9F4;
border-radius: 50%;
}
#container > #radio:before {
background: #fff;
content: "";
width: 30px;
height: 30px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 50%;
transform: translate(-50%, -50%);
}
/*以下样式的结合设置多选框*/
#container > #checkbox {
border: 1px solid #ddd;
position: relative;
top: 50%;
left: 10%;
width: 100px;
height: 100px;
transform: translate(-50%, 10%);
margin-top: 50px;
background: #03A9F4;
border-radius: 10px;
}
#container > #checkbox:before {
background: #fff;
content: "";
width: 30px;
height: 5px;
position: absolute;
top: 60%;
left: 18%;
transform: rotate(45deg);
}
#container > #checkbox:after {
background: #fff;
content: "";
width: 5px;
height: 60px;
position: absolute;
top: 20%;
transform: rotate(45deg);
left: 60%;
}
p {
padding: 30px 0;
}
</style>
<body>
<div id="container">
<p>图片选择框如下:</p>
<div id="add"></div>
<p>单选框如下:</p>
<div id="radio"></div>
<p>多选框如下:</p>
<div id="checkbox"></div>
</div>
</body>
</html>