纯CSS改写radio和checkbox,单选框、复选框样式优化

时间: 2019-09-20阅读: 320标签: 优化

input 的单选框 radio 和复选框 checkbox 是样式是很难调的,设置背景和边框都不起效。

我们可以使用下面的方法进行样式美化:纯css就能实现。


html

<h1>你喜欢我吗?</h1>
<label for="check1">
    <input type="checkbox" name="chk" id="check1"><span><span></span></span>喜欢
</label>
<label for="check2">
    <input type="checkbox" name="chk" id="check2"><span><span></span></span>非常喜欢
</label>


css 

将单选框或者复选框隐藏,在其后面写一个 span 利用 css 的相邻兄弟选择器  input + span 选中它,对它的样式进行美化。

<style>
    label{
        display: inline-block;
        width: 100px;
        text-align: left;
        line-height: 26px;
    }
    label input[type="checkbox"]{
        display: none;
    }
    label input[type="checkbox"]+span{
        box-sizing: border-box;
        display: inline-block;
        width: 20px;
        height: 20px;
        padding: 2px;
        border: 2px solid #ccc;
        vertical-align: sub;
        margin-right: 5px;
    }
    label input[type="checkbox"]+span>span{
        display: inline-block;
        width: 12px;
        height: 12px;
        float: left;
        background: #33bb00;
        opacity: 0;
    }
    label input[type="checkbox"]:checked+span{
        border-color: #33bb00;
    }
    label:hover input[type="checkbox"]+span>span{
        opacity: 0.5;
    }
    label input[type="checkbox"]:checked+span>span{
        opacity: 1;
    }
</style>

大功告成!如下图所示:


单选框也一样,只需要给 span 加一个圆角就可以啦!

label input[type="radio"]+span{ border-radius:50%; }


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/8319

关闭

js中for循环优化总结_如何提高程序的执行效率

在程序开发中,经常会使用到for循环的,但是很多人写的for循环效率都是比较低的,下面就举例说明,并总结优化for循环的方法,来提高我们程序的执行效率。

如何设置网站的robots.txt?

做过网站优化的朋友都知道,搜索引擎蜘蛛爬行抓取网站时首先会去访问根目录下的robots.txt文件,如果robots文件存在,则会根据robots文件内设置的规则进行爬行抓取,如果文件不存在则会顺着首页进行抓取,那么robots文件的工作原理是什么呢?

web系统整体优化提速总结

随着公司业务的拓展,随之而来就是各种系统横向和纵向的增加,PV、UV也都随之增加,原有的系统架构和模式慢慢遇上了瓶颈,需要逐步的对系统从整体上进行改造升级,通过一段时间的整理思路

css代码优化

css代码优化作用与意义:减少占用网页字节;便于维护;让自己写的css代码更加专业。css优化方法:缩写css代码;排列css代码;同属性提取共用css选择器

如何对 React 函数式组件进行优化?

本文只介绍函数式组件特有的性能优化方式,类组件和函数式组件都有的不介绍,比如 key 的使用。另外本文不详细的介绍 API 的使用,后面也许会写,其实想用好 hooks 还是蛮难的。

前端性能优化的三大处理方式

减少 HTTP 的请求次数和传输报文的大小,可以减少 HTTP 请求次数或者减少请求内容的大小 ,使图片渲染的更快:因为他们是基于代码渲染的,而对于位图(png/jpg/gif)是需要先把图片编码再渲染 ,可以避免图片失真变形

微信小程序代码优化总汇

写篇文章的目的,是以开放小程序代码的层面的优化。包括:条件判断将wx:if换成了hidden 、页面跳转请销毁之前使用的资源、列表的局部更新、小程序中多张图片懒加载方案、Input状态下隐藏input,应预留出键盘收起的时间

网站web前端常见的优化措施

一般网站优化都是优化后台,如接口的响应时间、SQL优化、后台代码性能优化、服务器优化等。高并发情况下,对前端web优化也是非常重要的。下面说说几种常见的优化措施。

JS 代码脏乱差?你需要知道这些优化技巧

JavaScript 是万众瞩目的力量。它是世界上最流行的编程语言。它容易理解,有丰富的学习资源,对初学者非常友好。JavaScript 有着庞大的资源库,对小公司和大企业都颇具吸引力。庞大的 JS 工具和库生态系统为开发者的生产力带来了福音

加速vue组件渲染之性能优化

平时在用vue开发后台管理系统的时候,应该会用到大量的table这种组件,正常这种组件我们会在项目里做二次封装,然后针对表头title做参数化配置,如下:

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广