在网页表单中,为了增强显示效果,会有一些用js模拟表单,做选中,弃选动效交互的操作。其实,我们也可以通过css类,css属性实现类似的操作。效果如下图:
那么如何仅通过css实现CheckBox、Select、Option自定义选中效果呢?
这里以 input 的 CheckBox为例,这里是一套简单的动态表单:
我们使用 checkbox 输入类型时,加上 :checked 伪类。
当 :checked 返回 true 的情况时,我们使用 transform 属性更改元素状态。
参考结构如下
要注意 label - input - i 的结构关系
<div class="viewlist">
<h1>仅用css实现CheckBox自定义选中效果</h1>
<label>
<input type="checkbox" name="" id="" />
<i></i>
<span>追格社区小程序</span>
</label>
<label>
<input type="checkbox" name="" id="" />
<i></i>
<span>追格企业小程序</span>
</label>
<label>
<input type="checkbox" name="" id="" />
<i></i>
<span>酱茄WordPress专业版</span>
</label>
</div>
css部分如下
其中 i 是实现默认方框转换为对勾的结构及相关动画
.viewlist {
padding: 50px;
position: relative;
background: #333;
}
.viewlist h1 {
color: #f3f3f3;
font-size: 24px;
padding: 10px;
display: inline-block;
border: 2px solid #EEE;
}
.viewlist label {
position: relative;
display: block;
margin: 40px 0;
color: #fff;
font-size: 24px;
cursor: pointer;
}
.viewlist input[type="checkbox"] {
-webkit-appearance: none;
}
.viewlist i {
position: absolute;
top: 2px;
display: inline-block;
width: 25px;
height: 25px;
border: 2px solid #fff;
}
.viewlist input[type="checkbox"]:checked ~ i {
top: 1px;
height: 15px;
width: 25px;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.viewlist span {
position: relative;
left: 40px;
transition: 0.5s;
}
.viewlist span:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: translateY(-50%) scaleX(0);
transform-origin: left;
transition: transform 0.5s;
}
.viewlist input[type="checkbox"]:checked ~ span:before {
transform: translateY(-50%) scaleX(1);
transform-origin: right;
transition: transform 0.5s;
}
.viewlist input[type="checkbox"]:checked ~ span {
color: #555;
}
你可以使用这种方法实现各种展示效果。
比如,当用户点击指定的复选框时候,切换到隐藏其他内容等。
在实际应用中,我们也把这种模拟动态效果的css技巧,应用到 <option> 和 <select> 元素中,实现方法,思路可以参考以上案例。
-
css详解系列:10-Flex项目属性orderorder 属性 用来设置或检索弹性盒模型对象的项目(子元素)在容器中出现的順序。
-
css详解系列:11-Flex项目属性align-selfalign-self属性定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
-
css实现点击切换图片效果的方法在css中我们可以使用伪类选择器来实现点击切换图片的效果,看看如何实现的。
-
css样式表的三种样式css(级联样式表)主要有三种样式定义方式
-
如何在css中实现样式优先级在css中,样式优先级是由一系列规则决定的,这些规则决定了当多个样式规则应用于同一个HTML元素时,哪个规则会优先生效。
-
css文本超出显示3个点的方法在css中,如果你想让超出特定长度的文本显示为三个点(...),你可以使用text-overflow属性,配合overflow和white-space属性。
暂无评论,抢个沙发...