纯CSS自定义checkbox对号

最近在做微信小程序，因为这个东西用的是自己的样式，也不支持BOM，所以有些东西用以前做浏览器前端的经验来看不太好弄，必须另辟捷径。
今天在做一个小程序项目，需要自定义checkbox复选框，自定义边框和内部对号样式，结合在网上搜到的东西以及自己理解，总算是做出来了。
这里主要是利用css3的伪类。
废话不多话，以下是源码实现。

html结构大概是这样的:

<label id="labelId" for="regular"><checkbox id="regular"/>
</label>

css代码是这样的：

#labelId{width:30px;height:30px;border-radius:4px;background-color: rgb(0,150,136);position: relative;
}
#labelId:after {content: '\00a0';display: inline-block;border: 4px solid #fff;border-top-width: 0;border-right-width: 0; width: 18px;height: 10px;-webkit-transform: rotate(-50deg);position: absolute;top:6px;left:4px;
}

效果如下：

选中前和选中后:

第二种

HTML:
<input type="checkbox" id="awesome">
<label for="awesome">Awesome!</label>CSS:
input[type='checkbox']+label::before {content:'\a0';/*不换行空格*/display: inline-block;vertical-align: 0.2em;width:0.8em;height:0.8em;margin-right: .2em;border-radius:.2em;background: silver;/*复选框的背景色*/text-indent:0.15em;line-height: 0.65;
}
input[type='checkbox'] {/*隐藏掉原先实际的 checkbox 框，之所以没用 display:none; 这种简单直接的方式，是因为这种方法会把它从键盘 tab 键切换焦点的队列中完全删除*/position: absolute;clip:rect(0,0,0,0);
}
input[type='checkbox']:checked+label::before {content:'\2713'; /*对号的 Unicode字符*/background: yellowgreen;/*对号的颜色*/
}

效果如下：

纯CSS自定义checkbox对号相关推荐

html给radio添加图片,使用纯CSS自定义radio(单选框)和checkbox（多选框）的样式
radio和checkbox由于不同的浏览器显示的样式不一致,因此我们需要自定义radio(单选框)和checkbox(多选框)的样式.基本原理就是贱radio和checkbox的自定义样式设置成图片 ...
纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
纯CSS设置Checkbox复选框控件的样式
下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要 ...
html自定义radio样式,用纯CSS 自定义radio checkbox 样式
以前做自定义样式的radio, checkbox 的时候,一直是如下结构文字然后定义diyRadio 的样式作为新Radio, 再用js 做关联. 知道今天才知道可以用标签的for 属性 + :c ...
html去除radio的样式,【HTML+CSS】纯CSS设置checkbox大小和样式附Radio的去除默认样式和自定义样式...
话不多说,直接上效果图: 一.使用的基本div: 正常复选框复选框checked 复选框disableed 二.自定义样式: input[type=checkbox] { margin-right: ...
CSS自定义checkBox复选框- 对勾样式
有checkBox复选框需求时,我们所用的框架样式不符合,所以需要自己写对勾样式,当然用图片也OK. 效果图: html: <div class="msg-position c-bg ...
纯 CSS 自定义多行省略：从原理到实现
大家好,我是漫步,今天来分享CSS省略技巧,助你写出更优秀的代码,喜欢的话,记得关注我并设为星标及时收到文章. 文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在 ...
html radio替换图片,html修改radio、checkbox样式_纯CSS改写checkbox样式，让复选框看起来更舒服一些...
原享一多很.等考指的似是很面一也者效下行插生的checkbox.radio样式不好看,试试把以下代码朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到进去看看. /* .myche ...
checkbox 选中_纯CSS修改checkbox复选框样式
效果图: 移入:

纯CSS自定义checkbox对号

纯CSS自定义checkbox对号相关推荐

最新文章

热门文章