美化 checkbox

原创 2016年08月29日 17:05:42

想必同学们也发现了 原生的checkbox真的 真的好丑啊 所以要美化一下 养养眼。
很简单,说一下美化的原理吧
一:把原生的checkbox设置成‘隐形的’
二:用另一个美化的元素覆盖原生的checkbox
直接看代码吧

<input type="checkbox" id="checkbox_a1" class="chk_1" />
<label for="checkbox_a1"></label>
<style>
    .chk_1 {
        display: none;
    }

    .chk_1 + label {
        background-color: #FFF;
        border: 1px solid #C1CACA;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
        padding: 9px;
        border-radius: 5px;
        display: inline-block;
        position: relative;
        margin-right: 30px;
    }

    .chk_1:checked + label:after {
        content: '\2714'; /*勾选符号*/
        position: absolute;
        top: 0px;
        left: 0px;
        color: #758794;
        width: 100%;
        text-align: center;
        font-size: 1.0em;
        vertical-align: text-top;
    }
</style>
版权声明:本文为博主原创文章,未经博主允许不得转载。

纯CSS美化单复选框(checkbox、radio)

这是在工作中遇到需要美化单选框和复选框查资料看到别人的,特别声明此文是转载别人,在此感谢原作者。觉得很有用在此码起来 原理就是:隐藏选择框本身,在利用标签放在原来选择框位置上。看代码: ...
  • joeone_strong
  • joeone_strong
  • 2017年04月13日 18:02
  • 7380

10个HTML5美化版复选框和单选框

转自:http://www.html5tricks.com/10-pretty-checkbox-radiobox.html 单选框Radiobox和复选框checkbox在网页中也十分常见,虽然...
  • chelen_jak
  • chelen_jak
  • 2015年04月02日 08:24
  • 103241

浅谈magic-check——美化单选款、复选框

单选框Radio和多选框checkbox需要美化吗?当然,原生的样式百年不变已经满足不了我们客户的需求。表单很多控件需要美化,我们有借 助Javascript来做美化的,也有直接用CSS来美化的,今天...
  • xiaokui_wingfly
  • xiaokui_wingfly
  • 2016年06月28日 18:25
  • 3355

单,复选框的美化

使用到的一句话显示隐藏DIV: onClick="document.getElementById('testy').style.display=(document.getElementById('te...
  • a403983161
  • a403983161
  • 2013年12月24日 11:41
  • 778

关于单选框以及复选框的css美化方法

在工作中,遇到单选框和复选框还是一件很头疼的事情。丑就算了,关键是各个浏览器都不一样,这非常让我头疼。以前一直用JQUERY来解决这个问题。不过js解决复选框没有问题,解决单选框就有点拙荆见肘,需要写...
  • FungLeo
  • FungLeo
  • 2015年08月25日 17:44
  • 3084

jquery实现表单美化特效包括checkbox和radio美化特效插件

  • 2013年11月15日 15:44
  • 285KB
  • 下载

纯CSS3美化radio和checkbox

如题,主要通过CSS3来实现将radio和checkbox美化的效果,但是兼容性并不是很好,PC端只支持chrome浏览器(IE和Firefox测试不行,其他没有更多测试)。然后微信端和QQ端访问也是...
  • u010571913
  • u010571913
  • 2015年07月20日 15:48
  • 2506

使用CSS3美化复选框checkbox

方法一 :使用图片 .checkbox { display: none; } .checkbox-i{ margin-right: 20px; background-im...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016年06月02日 18:30
  • 1697

一款非常漂亮的bootstrap表单checkbox/radio样式推荐

如题。 http://www.bootcss.com/p/icheck/ 这个bootstrap提供的icheck插件,首先是非常小。效率相对较高。其优点如下图所示: ...
  • white__cat
  • white__cat
  • 2017年02月18日 16:49
  • 2316

div仿checkbox表单样式美化及功能

div仿checkbox表单样式美化及功能,使用div图片是checkbox样式变的好看,分享给大家。...
  • rzg813
  • rzg813
  • 2014年05月05日 17:56
  • 3647
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:美化 checkbox
举报原因:
原因补充:

(最多只允许输入30个字)