自定义checkbox样式

通过选中时添加背景图片自定义CheckBox样式

效果：

CSS样式：

 <style type="text/css>label {width: 10%;display: flex;display: -webkit-flex;display: -moz-flex;flex-direction: row;justify-content: center;align-items: center;}label input[type=checkbox] {width: 15px;height: 15px;overflow: hidden;background: #fff;appearance: none;-webkit-appearance: none;border: 1px solid #808080;outline: none;margin-right: 5px;margin-top: 0;}input[type=checkbox]:checked {appearance: none;-webkit-appearance: none;background-image: url(./Images/btn-blue_03.png);background-position: center;background-repeat: no-repeat;background-size: 100%;border-radius: 4px;border: 0;overflow: hidden;}</style>

html结构：

<body><label><input type="checkbox" name="type" checked><span>one</span></label><label><input type="checkbox" name="type"><span>two</span></label>
</body>

更多专业前端知识，请上【猿2048】www.mk2048.com

自定义checkbox样式相关推荐

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 ...
微信小程序自定义checkbox样式
微信小程序自定义checkbox样式 checkbox .wx-checkbox-input{width:16px;height:16px;} checkbox .wx-checkbox-input. ...
Android之自定义checkbox样式
大部分情况下,我们在UI中并不采用Android自带的checkbox复选框样式,这时候就需要我们自定义自己的checkbox. 首先找两张checkbox背景图片,比如下图样子的: 然后在drawa ...
html更改checkbox样式,html自定义checkbox样式
1.原理就是将浏览器原生checkbox隐藏,对label进行相关操作.因为label和checkbox时绑在一起的,所以点击label就会选中 2.实现效果图片.png 3.代码提供一种图片 ...
【CSS】自定义checkbox样式
修改原生checkbox样式. 效果原理 1.利用CSS3属性 appearance. 该属性(强制)更改(改变)默认(原生)样式. Firefox 支持替代的 -moz-appearance 属性 ...
CSS3特效-自定义checkbox样式
前言: 在实际开发过程中,大多数时候都不会用原生的checkbox样式,因为太丑了, 如果我们不用任何ui库的话, 就要手动写一个了, 原理就是将默认的checkbox 的input标签隐藏掉, 然后 ...

自定义checkbox样式

自定义checkbox样式相关推荐

最新文章

热门文章