如何改变默认的checkbox样式

我们在项目中使用到input标签的checkbox的时候，它的默认样式通常无法满足项目需求，主要是它显得有点小而丑。将它根据项目的需求进行改造就是我们要做的事情了，下面讲两种常用的做法。

1.使用背景图片代替选中效果
主要原理就是将原来的checkbox隐藏：visibility: hidden属性但它依然占据位置，用图片代替它的位置。
优点就是兼容性好
效果图：

代码：

--html--
<div id="check">
<span><input type="checkbox"class="input_check" id="check1"><label for="check1"></label></span>
<span><input type="checkbox"class="input_check" id="check2"><label for="check2"></label></span>
</div>

--css--
#check {margin: 20px auto;}
#check .input_check {position: absolute;width: 20px;height: 20px;visibility: hidden;background: #E92333;}
#check span {position: relative;}
#check .input_check+label {display: inline-block;width: 20px;height: 20px;background: url('入驻申请页面3/入驻申请页面/images/gou.png') no-repeat;background-position: -31px -3px;border: 1px solid skyblue;}
#check .input_check:checked+label {background-position: -7px -4px;}

2.使用css3实现
主要是利用after，缺点是存在兼容性问题。
效果

--html--
<div id="check_css3">
<span><input type="checkbox"class="input_check" id="check3"><label for="check3"></label></span>
<span><input type="checkbox"class="input_check" id="check4"><label for="check4"></label></span>
</div>

--css--#check_css3 {margin: 20px auto;}#check_css3 span {position: relative;}#check_css3 .input_check {position: absolute;visibility: hidden;}#check_css3 .input_check+label {display: inline-block;width: 16px;height: 16px;border: 1px solid #ffd900;} #check_css3 .input_check:checked+label:after {content: "";position: absolute;left: 2px;bottom: 12px;width: 9px;height: 4px; border: 2px solid #e92333;border-top-color: transparent;border-right-color: transparent; -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); transform: rotate(-45deg);}

以上是两种实现方法的介绍,如果你有更好更快捷的方法。 Tell me please.

如何改变默认的checkbox样式相关推荐

如何改变uniapp中checkbox样式
第一步:复制这一段要写在app.vue中才可生效 //设置圆角checkbox.round .wx-checkbox-input,checkbox.round .uni-checkbox-input ...
改变Android中默认Dialog的样式
Android中默认的Dialog是黑白色的,有点丑啊! 在清单文件中application的标签属性中theme,默认的是: android:theme="@style/AppTheme& ...
html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
改变checkbox样式
开发工具与关键技术:Dreamweaver CC 2017 作者:林诗雄撰写时间:2019年1月17日 checkbox无法直接改变样式只能通过连接到label标签来改变checkbox的样式首先 ...
【CSS】自定义checkbox样式
修改原生checkbox样式. 效果原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
php复选框样式,如何自定义checkbox样式？附代码
本篇文章给大家带来的内容是关于如何自定义checkbox样式?附代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 修改原生checkbox样式. 效果原理 1.利用CSS3属性 ...
html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
【uni-app】深度作用选择器解决修改checkbox样式无效问题
uni-app表单多项选择器需要使用内置组件checkbox,具体使用见官网链接,如下: checkbox - uni-app官网 (dcloud.io) 官方给出h5端的默认样式是这样的: 现在 ...
CSS3特效-自定义checkbox样式
前言: 在实际开发过程中,大多数时候都不会用原生的checkbox样式,因为太丑了, 如果我们不用任何ui库的话, 就要手动写一个了, 原理就是将默认的checkbox 的input标签隐藏掉, 然后 ...

如何改变默认的checkbox样式

我们在项目中使用到input标签的checkbox的时候，它的默认样式通常无法满足项目需求，主要是它显得有点小而丑。将它根据项目的需求进行改造就是我们要做的事情了，下面讲两种常用的做法。

如何改变默认的checkbox样式相关推荐

最新文章

热门文章