【CSS】自定义checkbox样式

修改原生checkbox样式。

效果

原理

1.利用CSS3属性 appearance。

该属性（强制）更改（改变）默认（原生）样式。

Firefox 支持替代的 -moz-appearance 属性；Safari 和 Chrome 支持替代的 -webkit-appearance 属性；IE不支持该属性。

所以可以利用该属性取消checkbox的原生样式。

2.利用:checked选择器

当checkbox被选中的时候改变样式。

3. :after选择器 + content属性

:after选择器向元素之后插入内容。

我们再利用text-aligen和line-height让内容正居中就行了。

源码

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>checkbox</title><style>input {width: 16px;height: 16px;margin-top: 0;background-color: #fff;            border: 1px solid #c9c9c9;border-radius: 2px;color: #fff;text-align: center;line-height: 15px;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;outline: none;}input:hover {border-color: #43adea;}input:checked {color: #fff;background-color: #43adea;border: 1px solid #43adea;}input:after {content: "✔";}</style>
</head>
<body><input type="checkbox"><input type="checkbox">
</body>
</html>

转载于:https://www.cnblogs.com/linxian95/p/9772223.html

【CSS】自定义checkbox样式相关推荐

自定义checkbox样式
通过选中时添加背景图片自定义CheckBox样式效果: CSS样式: <style type="text/css>label {width: 10%;display: flex ...
php复选框样式,如何自定义checkbox样式？附代码
本篇文章给大家带来的内容是关于如何自定义checkbox样式?附代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 修改原生checkbox样式. 效果原理 1.利用CSS3属性 ...
android自定义checkbox样式,自定义CheckBox样式
阅读五分钟,每日十点,和您一起终身学习,这里是程序员Android 本篇文章主要介绍 Android 开发中的部分知识点,通过阅读本篇文章,您将收获以下内容: 自定义样式自定义选择器效果自定义素材 ...
WPF 自定义CheckBox样式
引: WPF 自定义CheckBox样式 - 一叶知秋,知寒冬 - 博客园 Checkbox基本样式下面的样式包含了CheckBox三种状态的显示,这里CheckBox的三种状态是使用图片代替的.当 ...
实现自定义CheckBox样式
实现自定义CheckBox样式 input[type=checkbox] {position: absolute;top: 5px;left: 10px;width: 30px;height: 30p ...
css自定义滚动条样式
代码 css自定义滚动条样式,webkit内核浏览器. /* 滚动条样式 */ ::-webkit-scrollbar {/* 滚动条的宽度 */width: 10px;margin-right: 7 ...
微信小程序自定义checkbox样式
微信小程序自定义checkbox样式 checkbox .wx-checkbox-input{width:16px;height:16px;} checkbox .wx-checkbox-input. ...
CSS自定义checkBox复选框- 对勾样式
有checkBox复选框需求时,我们所用的框架样式不符合,所以需要自己写对勾样式,当然用图片也OK. 效果图: html: <div class="msg-position c-bg ...
纯CSS自定义checkbox对号
最近在做微信小程序,因为这个东西用的是自己的样式,也不支持BOM,所以有些东西用以前做浏览器前端的经验来看不太好弄,必须另辟捷径. 今天在做一个小程序项目,需要自定义checkbox复选框,自 ...

【CSS】自定义checkbox样式

【CSS】自定义checkbox样式相关推荐

最新文章

热门文章