CSS之自定义原生checkbox样式

需求

原生的checkbox的样式基本不能满足项目的要求。在项目上，常常不使用原生的checkbox，而做个假的，通过点击事件来判断是否选中。

但往往，这并不是一个好的办法。如何解决？可以通过伪类来自定义checkbox的样式。

原生checkbox样式：

自定义checkbox样式：

实现

demo：https://jsfiddle.net/ken0qvj6/1/

<div><input type="checkbox"><span>同意条款</span>
</div>

给checkbox添加一个伪类，这部分会覆盖在原生的checkbox上，定义好未选中时的样式。选中时，将content替换为勾的字符，修改颜色和背景色自定义选中时的样式。

input[type=checkbox] {position: relative;width: 15px;height: 15px;margin-right: 5px;cursor: pointer;
}input[type=checkbox]:after {display: inline-block;content: "";width: 15px;height: 15px;border-radius: 3px;background: #fff;border: 1px solid #ddd;
}input[type=checkbox]:checked:after {content: "✓";font-size: 12px;font-weight: bold;color: #fff;background-color: #7f7159;text-align: center;}

CSS之自定义原生checkbox样式相关推荐

Amazing Css：自定义下划线样式的Input
Amazing Css:自定义下划线样式的Input 这篇文章将通过CSS的方式实现一个常见的Input样式,包括一些VUE的Tips 效果相比于传统的方框Input同款样式,下划线的input输入 ...
html自定义radio样式,用纯CSS 自定义radio checkbox 样式
以前做自定义样式的radio, checkbox 的时候,一直是如下结构文字然后定义diyRadio 的样式作为新Radio, 再用js 做关联. 知道今天才知道可以用标签的for 属性 + :c ...
自定义input checkbox样式
input[type="checkbox"]{width:20px;height:20px;display: inline-block;text-align: center;ver ...
【CSS】自定义checkbox样式
修改原生checkbox样式. 效果原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
html修改原生checkbox选中的颜色_[三分钟小文]前端性能优化-HTML、CSS、JS部分
阅读本文您将收获: 性能优化的整体思路在HTML.CSS.JavaScript层级的性能优化为什么要进行性能优化用户: 提升用户体验,改善页面性能开发者: 体现公司意志和开发人员技能性能优化 ...
php复选框样式,如何自定义checkbox样式？附代码
本篇文章给大家带来的内容是关于如何自定义checkbox样式?附代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 修改原生checkbox样式. 效果原理 1.利用CSS3属性 ...
css笔记——css 实现自定义按钮
css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...
html更改checkbox样式,html自定义checkbox样式
1.原理就是将浏览器原生checkbox隐藏,对label进行相关操作.因为label和checkbox时绑在一起的,所以点击label就会选中 2.实现效果图片.png 3.代码提供一种图片 ...
通过CSS修改checkbox样式(利用label的for属性进行焦点传递)
需求背景: 在页面设计时,常常会用到input复选框.如果用到一些前端框架的话,一般复选框的样式都可以满足需要:但是对于未使用前端框架,直接原生的话样式可能满足不了项目需要,因此我们需要修改复选框的样 ...

CSS之自定义原生checkbox样式

需求

实现

CSS之自定义原生checkbox样式相关推荐

最新文章

热门文章