checkbox 样式美化

更新日期: 2021-11-23阅读量: 97标签: 样式

checkbox美化思路

checkbox无法直接改变样式只能通过连接到label标签来改变checkbox的样式,像checkbox或radio的美化,根本就不用插件了。

思路都一样的,先把之前的按钮透明度opacity设置为0 ,  隐藏掉所有的Checkbox复选框后,我们需要添加一个label html元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中。这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框。

然后就通过设置div的label,伪类等多种方式来实现了美化功能。下面会讲到2种与众不同的checkbox复选框样式。


checkbox美化样式一:


html

<div class="mycheck">
<input type="checkbox" value="1" id="checkbox1" name="">
<label for="checkbox1"></label>
</div>
<div class="mycheck">
<input type="checkbox" value="1" id="checkbox2" name="">
<label for="checkbox2"></label>
</div>

css

.mycheck {
width:25px;
margin:20px 100px;
position:relative;
}
.mycheck input[type=checkbox] {
visibility:hidden;
}
.mycheck label {
cursor:pointer;
position:absolute;
width:25px;
height:25px;
top:0;
left:0;
background:#fff;
border:2px solid #ccc;
-moz-border-radius:50%;
-webkit-border-radius:50%;
border-radius:50%;
}
.mycheck label:after {
opacity:0;
content:'';
position:absolute;
width:9px;
height:5px;
background:transparent;
top:6px;
left:6px;
border:4px solid #fff;
border-top:none;
border-right:none;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}
.mycheck input[type=checkbox]:checked + label {
background:#f40;
border:2px solid #f40;
}
.mycheck input[type=checkbox]:checked + label:after {
opacity:1;
background:#f40;
}


checkbox美化样式二

checkbox实现开关按钮的样式,如下:


html:

<div class='search_checkbox'>
<input type='checkbox' id='switch'>
<label for='switch'></label>
</div>

css:

.search_checkbox {
margin: 0;
padding: 0;
height: 0.62rem;
width: 1.02rem;
display: flex;
box-sizing: border-box;
}
.search_checkbox input[type=checkbox] {
height: 0px;
width: 0px;
visibility: hidden;
}
.search_checkbox label {
height: 0.62rem;
width: 1.02rem;
cursor: pointer;
/* height: 20px; */
border-radius: 0.5rem;
display: inline-block;
background-color: #C6CAD3;
/* width: 40px; */
text-indent: -99999px;
position: relative;
}
.search_checkbox label::before {
content: '';
display: inline-block;
background-color: #fff;
height: 0.56rem;
width: 0.56rem;
position: absolute;
top: 0.02rem;
left: 0.02rem;
border-radius: 50%;
transition: 0.3s;
}
.search_checkbox input:checked+label {
background: #2BA0FF;
}
.search_checkbox input:checked+label:before {
left: calc(100% - 0.02rem);
transform: translateX(-100%);
}
.search_checkbox label:active:before {
width: 0.4rem;
}

注意点:这里使用的rem,相对布局,根据根元素font-size来确定适配大小的。



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: https://www.fly63.com/article/detial/10844

css怎么去掉li前的默认点?

list-style这个属性就是控制<li></li>的列表项目标记,默认是实心点,相当于加上了list-style:disc;list-style-type属性用于设置列表项标记的类型。设置list-style-type:none就可将列表项 li 默认样式移除。

css z-index的层级关系

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。注释:元素可拥有负的 z-index 属性值。

引入CSS样式的三种方式

行内式:该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。内嵌式<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。

JavaScript自定义getStyle方法获取元素样式

由于getComputedStyle方法在IE浏览器中只兼容IE9及其以上,而IE8和它之前的浏览器则需要使用currentStyle方法来获取样式,所以我们就可以自定义一个getStyle方法来解决兼容性的问题

好看css搜索框样式_分享8款纯CSS搜索框

最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,代码如下!

js和jquery设置css样式的几种方法

直接设置style的属性 某些情况用这个设置 !important值无效;直接设置属性(只能用于某些属性,相关样式会自动识别);改变class 比如JQ的更改class相关方法因JS获取不到css的伪元素

为什么要初始化css样式?

为什么要初始化css样式1.浏览器差异:不同浏览器对有些标签的默认值是不同的,如果没对css初始化会出现浏览器之间的页面显示差异2.提高编码质量;如果不初始化,整个页面做完会很糟糕,重复的css样式很多

为什么会出现CSS前缀?

使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀。这是为什么呢?浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。

简写的 border-radius 100% 和 50% 是等效的

border-radius 这个 css 属性大家应该使用得非常娴熟,现实中用到的场景基本都是四个圆角一致的情况。比如实现一个圆形按钮,其中 border-radius 数值有些人写为 50%,有些人则写成 100%

VUE中CSS样式穿透

在做两款H5的APP项目,前期采用微信官方推荐的weui组件库。后来因呈现的效果不理想,组件不丰富,最终项目完成后全部升级采用了有赞开发的vant组件库。同时将webpack顺利从3升级到4(项目结构 webpack+vue+vuex+vue-router+vant+less)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!