html实现下拉框、switch开关、复选框效果
1、下拉框，效果如下图所示：
代码：
<style>
.selectBox {
width: 90px;
margin: 50px;
}
.select {
width: 90px;
background-color: #17a6b5;
height: 40px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
}
.select img {
width: 20px;
cursor: pointer;
transition: all 0.5s;
}
.selectOption {
background-color: #666666;
width: 90px;
list-style: none;
padding-left: 0;
margin-top: 0;
display: none;
}
.selectOption li {
width: 100%;
color: #ffffff;
text-align: center;
cursor: pointer;
}
.selectOption li:hover {
background-color: #17a6b5;
}
</style>
<body>
<div class="selectBox">
<div class="select">
<span class="selectText">北京</span>
</div>
<ul class="selectOption">
<li class="selectOption1">北京</li>
<li class="selectOption2">上海</li>
</ul>
</div>
<script>
var selectBox = document.getElementsByClassName('selectBox')[0]
var Select = document.getElementsByClassName('select')[0]
var selectText = document.getElementsByClassName('selectText')[0]
var option = document.getElementsByClassName('selectOption')[0]
var option1 = document.getElementsByClassName('selectOption1')[0]
var option2 = document.getElementsByClassName('selectOption2')[0]
// 点击select
Select.onclick = function () {
option.style.display = 'block'
}
// 鼠标移除
selectBox.onmouseleave = function () {
option.style.display = 'none'
}
option1.onclick = function () {
option.style.display = 'none'
selectText.innerHTML = '北京'
}
option2.onclick = function () {
option.style.display = 'none'
selectText.innerHTML = '上海'
}
</script>
</body>
2、switch开关，效果如下图所示：
代码：
<style>
.switch-container {
height: 25px;
width: 48px;
margin: 50px;
display: inline-block;
overflow: hidden;
}
.switch-container input {
display: none;
}
.switch-container label {
display: block;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.25);
cursor: pointer;
border-radius: 25px;
transition: all 0.4s ease;
}
.switch-container label:before {
content: '';
display: block;
border-radius: 25px;
height: 21px;
width: 21px;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.08);
transition: all 0.4s ease;
background-color: #fff;
position: relative;
right: -2px;
top: 2px;
}
.switch-container input:checked~label:before {
right: -25px;
background-color: rgba(31, 255, 255, 1);
}
/* .switch-container input:checked~label {
background-color: #1890ff;
} */
</style>
<body>
<div class="switch-container">
<input type="checkbox" id="user-switch" />
<label for="user-switch"></label>
</div>
</body>
2、复选框，效果如下图所示：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
.check {
display: inline-block;
cursor: pointer;
margin: 50px;
}
.check input {
display: inline-block;
width: 14px;
height: 14px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
background: url(./images_select_bgs.png) no-repeat center center;
background-size: 100% 100%;
cursor: pointer;
vertical-align: middle;
margin-top: -3px;
}
.check input:checked {
position: relative;
background: url(./images_select_duihaos.png) no-repeat center center;
background-size: 100% 100%;
}
</style>
</head>
<body>
<label class="check"> <input type="checkbox" />复选框 </label>
</body>
</html>
