纯css自定义checkbox和radio的样式

以上是结构。说明一下,这样写是为了展示点击文字即可选中的两种方式,因为之前我一直忽略了第二种方法。

css部分也是分开写的,其实基本一样,只是为了更直观看清楚:

div{    width:200px;    height:100px;    background:#013879;    padding:15px;    color:#fff;    font-size:14px;}

改变checkbox:

.checkbox{    width:12px;    height:13px;    background:#fff;    border:1px solid #ddd;    appearance:normal;  /*设置元素的呈现样式    normal是设置成常规样式*/    -moz-appearance:button; /* Firefox */    -webkit-appearance:button; /* Safari 和 Chrome */    outline:none;  /* 去掉input点击时候的边框颜色 */    border-radius: 2px;    margin:0 0 3px 0;    position:relative;    vertical-align: middle;}input[type=checkbox]:checked:after {    content:"";  /* 与:before 及 :after 伪元素配合使用,来插入生成内容 */    width:6px;    height:10px;    position:absolute;    top:-2px;    left:2px;    border-right:2px solid transparent;  /* transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。*/    border-bottom:2px solid transparent;    transform:rotate(45deg);    -webkit-transform:rotate(45deg);    border-color:#3ccd58;    border-radius: 2px;}

改变radio样式:
.radio{    width:12px;    height:12px;    background:#fff;    border:1px solid #ddd;    appearance:normal;  /*设置元素的呈现样式    normal是设置成常规样式*/    -moz-appearance:button; /* Firefox */    -webkit-appearance:button; /* Safari 和 Chrome */    outline:none;  /* 去掉input点击时候的边框颜色 */    border-radius: 50%;    margin:0 0 3px 0;    position:relative;    vertical-align: middle;}input[type=radio]:checked:after {    content:"";  /* 与:before 及 :after 伪元素配合使用,来插入生成内容 */    width:5px;    height:5px;    position:absolute;    top:50%;    margin-top:-3.5px;    left:50%;    margin-left:-3.5px;    background-color: #fff;    border: 1px #3ccd58 solid;    -webkit-border-radius: 50%;}

效果图暂时先放一个静态的,大家可以自己复制粘贴代码到编辑器测试一下:

总结用到的知识点:

  (1) :after 伪类  : 在元素之后添加内容

  (2) content : 配合:before和:after伪类使用,来插入生成内容

     (3) appearance属性: 设置元素的呈现样式

  (4) transparent:transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。在css3中,可用在任何一个有color的属性上。

  (5) transform:rotate():旋转,参数是选装的角度



原文地址:https://www.cnblogs.com/ly-qingqiu/p/9186842.html

时间: 2024-10-19 04:32:17

纯css自定义checkbox和radio的样式的相关文章

巧用CSS3伪类选择器自定义checkbox和radio的样式

由于原生的checkbox和radio的样式太简陋了,在设计页面的时候,设计师往往会设计自己的checkbox和radio样式.一半情况下,为了适应各个浏览器的兼容性,我们都会用其他的元素替代原生的checkbox和radio,然后用js实现选中和未选中时候的样式,用来模拟checkbox和radio. 例如这种: 用其他元素模拟(以checkbox为例): <div class='checkbox'></div> $('.checkbox').click(function(){

纯CSS修改checkbox复选框样式

借鉴网友博客, 改用后整理收录 效果图: 移入: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box_inner1{ width: 25px; margin: 20px 100px; /*最外层盒子的外边距, 可自己调*/ position:

[ HTML5 表单样式 checkbox | radio ] 自定义checkbox 与radio样式实现思路

自定义checkbox 与radio样式实现思路: 1.隐藏原生的input选框  2.自定义新的选框  3.并通过CSS或JS控制切换是否选中的状态 声明:转载自网络,本人只作为学习之用,如果原作者发现(觉着)有侵权意图敬请联系本人,删除或修改,本人尊重原文作者的劳动并对原文作者的分享表示感谢和敬意... 分析原理: 实现 1.结构:用label绑定input,推荐使用label包裹input,以减少不必要的id: 2.样式:隐藏input标签,为label添加背景或使用其他小标签(<i>&

自定义checkbox, radio样式总结

任务目的 深入了解html label标签 了解CSS边框.背景.伪元素.伪类(注意和伪元素区分)等属性的设置 了解CSS中常见的雪碧图,并能自己制作使用雪碧图 任务描述 参考 样例(点击查看),实现页面开发,要求实现效果基本一致 任务注意事项 尝试背景图和伪元素两种不同方式实现,对比两种方式各自的优缺点. 注意测试不同情况,尤其是极端情况下的效果. 参考资料 MDN label: 了解html中label的基本知识 MDN background-position: 了解背景图片定位相关知识 M

自定义checkbox, radio样式

17.2.25.nimil 今天开始做百度前端学院的任务,第一个是自定义checkbox, radio样式. checkbox和radio两个标签是不可以改变样式的,background-color.border等属性都对其无效. 但是本身的样式又不太美观: 本身的radio外观:本身的checkedbox外观. 不能改样式,却又如此的不美观,实在不符合我们现在的审美和需求. 这是百度给的一个样式图片: 首先,HTML: <div> <input type="radio&quo

jQuery实现自定义checkbox和radio样式

jQuery实现自定义checkbox和radio样式 1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都知道在写结构的时候,radio或checkbox都会跟随label一起使用,label的for属性值和input的id值相同的情况下,点击label就可以选中input,这里正是利用label 来覆盖我们的input默认样式,通过给label添

css input checkbox和radio样式美化

css input checkbox和radio样式美化 2014年9月1日 132495次浏览 在之前的一篇文章中,我已经介绍了input file上传按钮的美化,地址:http://www.haorooms.com/post/css_input_uploadmh ,今天,我们来讲一下checkbox美化和radio美化,关于select下拉框的美化的话,要用一个jquery插件了,这个插件后面我们再讲!急用的同学可以留言! 但是像checkbox美化和radio美化,input美化,根本就不

纯CSS设置Checkbox复选框控件的样式

下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式. 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观.要做到点需要添加一段代码到你的CSS文件中. 隐藏掉所有的Checkbox复选框后,我们需要添加一个label HTML元素,我们都知道,当点击的有for属性的label标签时,对应的Checkbox复选框会被选中.这意味着,我们可以通过label的点击事件来处理我们的Checkbox复选框. 样式一 此复选框

checkbox和radio的样式美化问题

如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对定位的方式,手动切换checked和unchecked的图片,定位到原来input显示的地方: 2.使用jQuery的iCheck插件 . 中文DOC地址:http://www.bootcss.com/p/icheck/ github地址:https://github.com/fronteed/iC