精华内容
下载资源
问答
  • iCheck美化check标签

    2017-09-05 15:36:30
    iCheck是一款对checkbox的美化插件,支持几乎所有浏览包括移动浏览器 iCheck有: 25种参数 用来定制复选框(checkbox) 和单选按钮(radio button) 8个回调事件 用来监听输入框的状态 7个方法 用来通过编程方式...

    iCheck是一款对checkbox的美化插件,支持几乎所有浏览包括移动浏览器

    iCheck有:

    25种参数   用来定制复选框(checkbox) 和单选按钮(radio button)

    8个回调事件  用来监听输入框的状态

    7个方法   用来通过编程方式控制输入框的状态

    能够将输入框的状态变化同步回原始输入框中,支持所有的选择器


    7个使用方法:



    gitHub  https://github.com/fronteed/icheck
    官网  http://icheck.fronteed.com/

    $('input').iCheck('check');   //将输入框的状态设置为checked 
    $('input').iCheck('uncheck'); //移除 checked 状态 
    $('input').iCheck('toggle');  //toggle checked state 
    $('input').iCheck('disable'); //将输入框的状态设置为 disabled 
    $('input').iCheck('enable');  //移除 disabled 状态 
    $('input').iCheck('update');  //apply input changes, which were done outside the plugin 
    $('input').iCheck('destroy'); //移除iCheck样式 
    
    展开全文
  • 当然,原生的样式百年不变已经满足不了我们客户的需求。表单很多控件需要美化,我们有借 助Javascript来做美化的,也有直接用CSS来美化的,今天我给大家介绍使用纯CSS实现radio和checkbox的美化。 ...

    查看原文

    查看在线演示Demo和更多原文内容教程:浅谈magic-check——美化单选款、复选框

    单选框Radio和多选框checkbox需要美化吗?当然,原生的样式百年不变已经满足不了我们客户的需求。表单很多控件需要美化,我们有借 助Javascript来做美化的,也有直接用CSS来美化的,今天我给大家介绍使用纯CSS实现radio和checkbox的美化。
    这里写图片描述

    HTML

    <div id="main">
    
    
        <div class="demo">
            <div class="col">
              <h4>Checkbox</h4>
    
                <div class="opt">
                    <input class="magic-checkbox" type="checkbox" name="layout" id="c1">
                    <label for="c1">Normal</label>
                </div>
                <div class="opt">
                    <input class="magic-checkbox" type="checkbox" name="layout" id="c2" checked>
                    <label for="c2">Checked</label>
                </div>
                <div class="opt">
                    <input class="magic-checkbox" type="checkbox" name="layout" id="c3" value="option2" disabled>
                    <label for="c3" style="color:#ccc">Disabled</label>
                </div>
                <div class="opt">
                    <input class="magic-checkbox" type="checkbox" name="layout" id="c4" checked disabled>
                    <label for="c4" style="color:#ccc">Checked && Disabled</label>
                </div>
    
    
    
            </div>
    
            <div class="col">
                <h4>Radio</h4>
                <div class="opt">
                    <input class="magic-radio" type="radio" name="radio" id="r1" value="option1">
                    <label for="r1">Normal</label>
                </div>
                <div class="opt">
                    <input class="magic-radio" type="radio" name="radio" id="r2" value="option2" checked>
                    <label for="r2">Checked</label>
                </div>
                <div class="opt">
                    <input class="magic-radio" type="radio" name="radio" id="r3" value="option3" disabled>
                    <label for="r3" style="color:#ccc">禁用</label>
                </div>
                <div class="opt">
                    <input class="magic-radio" type="radio" id="r4" value="option4" checked disabled>
                    <label for="r4" style="color:#ccc">Checked && Disabled</label>
                </div>
            </div>
        </div>
    
    </div>

    CSS

    @keyframes hover-color {
      from {
        border-color: #c0c0c0; }
      to {
        border-color: #3e97eb; } }
    
    .magic-radio,
    .magic-checkbox {
      position: absolute;
      display: none; }
    
    .magic-radio[disabled],
    .magic-checkbox[disabled] {
      cursor: not-allowed; }
    
    .magic-radio + label,
    .magic-checkbox + label {
      position: relative;
      display: block;
      padding-left: 30px;
      cursor: pointer;
      vertical-align: middle; }
      .magic-radio + label:hover:before,
      .magic-checkbox + label:hover:before {
        animation-duration: 0.4s;
        animation-fill-mode: both;
        animation-name: hover-color; }
      .magic-radio + label:before,
      .magic-checkbox + label:before {
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        width: 20px;
        height: 20px;
        content: '';
        border: 1px solid #c0c0c0; }
      .magic-radio + label:after,
      .magic-checkbox + label:after {
        position: absolute;
        display: none;
        content: ''; }
    
    .magic-radio[disabled] + label,
    .magic-checkbox[disabled] + label {
      cursor: not-allowed;
      color: #e4e4e4; }
      .magic-radio[disabled] + label:hover, .magic-radio[disabled] + label:before, .magic-radio[disabled] + label:after,
      .magic-checkbox[disabled] + label:hover,
      .magic-checkbox[disabled] + label:before,
      .magic-checkbox[disabled] + label:after {
        cursor: not-allowed; }
      .magic-radio[disabled] + label:hover:before,
      .magic-checkbox[disabled] + label:hover:before {
        border: 1px solid #e4e4e4;
        animation-name: none; }
      .magic-radio[disabled] + label:before,
      .magic-checkbox[disabled] + label:before {
        border-color: #e4e4e4; }
    
    .magic-radio:checked + label:before,
    .magic-checkbox:checked + label:before {
      animation-name: none; }
    
    .magic-radio:checked + label:after,
    .magic-checkbox:checked + label:after {
      display: block; }
    
    .magic-radio + label:before {
      border-radius: 50%; }
    
    .magic-radio + label:after {
      top: 7px;
      left: 7px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #3e97eb; }
    
    .magic-radio:checked + label:before {
      border: 1px solid #3e97eb; }
    
    .magic-radio:checked[disabled] + label:before {
      border: 1px solid #c9e2f9; }
    
    .magic-radio:checked[disabled] + label:after {
      background: #c9e2f9; }
    
    .magic-checkbox + label:before {
      border-radius: 3px; }
    
    .magic-checkbox + label:after {
      top: 2px;
      left: 7px;
      box-sizing: border-box;
      width: 6px;
      height: 12px;
      transform: rotate(45deg);
      border-width: 2px;
      border-style: solid;
      border-color: #fff;
      border-top: 0;
      border-left: 0; }
    
    .magic-checkbox:checked + label:before {
      border: #3e97eb;
      background: #3e97eb; }
    
    .magic-checkbox:checked[disabled] + label:before {
      border: #c9e2f9;
      background: #c9e2f9; }
    
    
    body{line-height: 2em;
        padding: 30px;}

    我们知道,很多使用JS来美化表单控件的方法都不是很理想,需要借助引入js和css,有的甚至使用图片和字体图标,而且还要依赖jQuery,而且复杂、可维护性差。

    使用magic-check
    magic-check只用了几十行CSS代码就可以实现checkbox和radio表单的美化。首先载入css文件。

    <link rel="stylesheet" type="text/css" href="magic-check.css">

    然后,只要给input元素加上一个CSS类magic-checkbox或magic-radio就可以。

    Radio

    
    <input class="magic-radio" type="radio" name="radio" id="r1">
    <label for="r1">Normal</label>

    Checkbox

    <input class="magic-checkbox" type="checkbox" name="layout" id="c1">
    <label for="c1">Normal</label>

    细心的朋友可以看下css代码,已经打包可以下载。CSS将checkbox和radio隐藏,然后使用:before和:after定位重绘checkbox和radio外观,从而达到美化效果,支持IE9+。

    参考链接:
    http://www.w3cfuns.com/notes.php?mod=view&u=15399&id=ec9943568a2304020017cfe362fe39c8

    展开全文
  • 思路:在原控件外模拟效果,...1radio按钮样式美化 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <st...

    思路:在原控件外模拟效果,隐藏原生控件。

    1 radio按钮样式美化

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .pay_list_c1 {
     8             width: 24px;
     9             height: 18px;
    10             float: left;
    11             padding-top: 3px;
    12             cursor: pointer;
    13             text-align: center;
    14             margin-right: 10px;
    15             background-image: url(images/inputradio.gif);
    16             background-repeat: no-repeat;
    17             background-position: -24px 0;
    18         }
    19         .radioclass {
    20             opacity: 0;
    21             cursor: pointer;
    22             -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    23             filter: alpha(opacity=0);
    24         }
    25         .on {
    26             background-position: 0 0;
    27         }
    28     </style>
    29 </head>
    30 <body>
    31 <span class="pay_list_c1">
    32 <input type="radio" checked="checked" name="paylist" value="1" class="radioclass">
    33 </span>
    34 <span class="pay_list_c1">
    35 <input type="radio" checked="checked" name="paylist" value="1" class="radioclass">
    36 </span>
    37 <script src=jquery.min.js>
    38 
    39 </script>
    40 <script>
    41     $(".pay_list_c1").on("click",function(){
    42         $(this).addClass("on").siblings().removeClass("on");
    43     })
    44 </script>
    45 </body>
    46 </html>

    所用到的图片:   直接复制即可

    2 checkbox按钮样式美化

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6     <style>
     7         .piaochecked {
     8             width: 20px;
     9             height: 20px;
    10             float: left;
    11             cursor: pointer;
    12             margin-left: 10px;
    13             text-align: center;
    14             background-image: url(images/checkbox_01.gif);
    15             background-repeat: no-repeat;
    16             background-position: 0 0;
    17         }
    18 
    19         .on_check {
    20             background-position: 0 -21px;
    21         }
    22         .radioclass {
    23             opacity: 0;
    24             cursor: pointer;
    25             -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    26             filter: alpha(opacity=0);
    27         }
    28     </style>
    29 </head>
    30 <body>
    31 <div class="piaochecked on_check">
    32     <input name="need_inv" type="checkbox" style="height:20px;width:20px;" class="radioclass" value="1">
    33 </div>
    34 <div class="piaochecked on_check">
    35     <input name="need_inv" type="checkbox" style="height:20px;width:20px;" class="radioclass" value="1">
    36 </div>
    37 <script src=jquery.min.js></script>
    38 <script>
    39     $(".piaochecked").on("click",function(){
    40         $(this).hasClass("on_check")? $(this).removeClass("on_check"):$(this).addClass("on_check");
    41         //或者这么写
    42         // $(this).toggleClass( "on_check" );
    43     })
    44 </script>
    45 </body>
    46 </html>

     

    转载于:https://www.cnblogs.com/wu-hou/p/6378273.html

    展开全文
  • input checkbox样式美化

    万次阅读 2018-07-15 12:41:27
    最近在学校做自己的学习实践项目中,用到了checkbox,想实现的是,在登陆界面的中的那个记住我的选框。我们都知道,原生的checkbox样式不能满足咱们的需求。所以接下来,让我自己动动手,换种方式美化一下吧。

    input checkbox样式美化

    最近在学校做自己的学习实践项目中,用到了checkbox,想实现的是,在登陆界面的中的那个记住我的选框。我们都知道,原生的checkbox样式不能满足咱们的需求。所以接下来,让我们一起动动手,换种方式美化一下吧。

    以下我们将会学到的知识技巧吧:

    • div居中于页面
    • checkbox样式美化
    • label for属性的使用

    话不多说,用图说话:

    【原生样式】
    [美化后样式]
    【用到的icon】这里写图片描述(可右键保存本地)
    这里的icon可以自己去找,我这里用的像素尺寸是32的,大家也可以到iconfont-阿里巴巴矢量图标库网下载:http://www.iconfont.cn

    思路

    • div居中于页面
      首先是给div一个宽高,这个为了后面的居中定位,继续,给个绝对定位absolute,其次就是把topleft都设置成50%,这里可能会有的同学说,这样不就可以居中了,其实你仔细的瞅一眼,它并没有居中,我们都知道原点坐标为屏幕的左上角,div定位也是根据自身的左上角来定位,所以我们还需要加上margin-top:-12px ;和margin-left:-40px ;这里的数值就是div宽高的一半,这样,我们就可以看到它居中啦。不过最后还有一个需要注意的地方,假如说我加了一个padding,然后就不居中了。放心一样的道理,假如说我给div加了一个padding: 10px; ,这时需要为margin-topmargin-left 在原来的值的绝对值基础上加10 ,如margin-top:-12px ;和margin-left:-40px ; 变成margin-top:-22px ;和margin-left:-50px ; ,这个相加的值是上下和左右padding的各一半。
    div {
            width: 80px;
            height: 24px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin:-12px 0 0 -40px ;
            text-align: center;
            }

    拿本次例子来演示效果图:

    - checkbox样式美化
    首先,我们需要把checkbox的透明度设置为0: opacity: 0; 然后我们需要用到span,作为checkbox的选中状态显示。接着span一个背景icon,然后根据icon的分辨率尺寸大小设置背景图片的一些属性,关键是它: background-position-y: 20px;,目的是:当checkbox 未选中的时候,让背景图片挪到一个我们看不见的地方去,当checkbox 选中的时候,让背景图片再挪回来,也就是重置为0:background-position-y: 0px;,剩下的就是给它一个过渡效果,用户体验就更好啦,最后这样就达到我们的目的啦,具体代码如下:

    input[type=checkbox]{
        width: 16px;
        height: 16px;
        position: absolute;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
    }
    span {
        position: absolute;
        top: 4px;
        width: 14px;
        height: 14px;
        border: 1px solid #d6d6d6;
        border-radius: 3px;
        background: url(img/fork_green.png);
        background-size: 14px;
        background-repeat: no-repeat;
        background-position-x: 0px;
        background-position-y: 20px;
        -webkit-transition: background-position-y 0.1s linear;
        -o-transition: background-position-y 0.1s linear;
        transition: background-position-y 0.1s linear;
    }
    input[type=checkbox]:checked+span {
        background-position-y: 0px;
    }
    • label for属性的使用
      大家有没有发现,在上面代码中,单击记住我的文字没有效果!!!有些同学会问,这是为啥,那我们这里就是解决这个问题,而我又不想用JS去写,这么麻烦,还得if else弄来弄去,对吧。
      - HTML
      for 属性规定 label 绑定的表单元素,element_id为label 绑定的元素的 id。使用方法如下:
    <label for="element_id">
    
    /*例如*/
    <input type="checkbox" id="remember-me-checkbox">
    <label for="remember-me-checkbox">记住我 </label>

    该说的说完了,上代码吧

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>checkbox美化</title>
        </head>
        <style type="text/css">
            #remember-password-container {
                width: 80px;
                height: 24px;
                position: absolute;
                top: 50%;
                left: 50%;
                margin:-12px 0 0 -40px ;
                text-align: center;
            }
            #remember-password-container .remember-password-content {
                position: relative;
            }
    
            #remember-password-container input[type=checkbox]{
                width: 16px;
                height: 16px;
                position: absolute;
                opacity: 0;
                cursor: pointer;
                z-index: 2;
                font-size: initial;
            }
    
            #remember-password-container .remember-me-label {
                color: #000;
                margin-left: 25px;
                cursor: pointer;
            }
            #remember-password-container .remember-me-label::selection{
                background: rgba(0,0,0,0);
            }
            #remember-password-container span {
                position: absolute;
                top: 4px;
                width: 14px;
                height: 14px;
                border: 1px solid #d6d6d6;
                border-radius: 3px;
                background: url(img/fork_green.png);
                background-size: 14px;
                background-repeat: no-repeat;
                background-position-x: 0px;
                background-position-y: 20px;
                -webkit-transition: background-position-y 0.1s linear;
                -o-transition: background-position-y 0.1s linear;
                transition: background-position-y 0.1s linear;
            }
    
            #remember-password-container input[type=checkbox]:checked+span {
                background-position-y: 0px;
            }
        </style>
    
        <body>
            <div id="remember-password-container">
                <div class="remember-password-content">
                    <input type="checkbox" id="remember-me-checkbox">
                    <span></span>
                    <label class="remember-me-label" for="remember-me-checkbox">记住我 </label>
                </div>
            </div>
        </body>
    </html>

    结束语

    这个编辑工具使用不是很顺手,大家凑活着看吧,请多多谅解,同时有哪些错误点误导大家的,也请大家留言多多吐槽一起学习。这次笔记就写到这里啦!谢谢大家(^_^)。

    展开全文
  • /*check,radio*/ input.check_txt[type='checkbox']{ display: none; } input.check_txt[type='checkbox'] + label{ display: block; float: left; -moz-appearance: none; -webkit-appe...
  • 单选、多选样式美化

    2019-04-12 14:34:32
    今天空了,特意把常见的单选、多选美化下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多选框样式</title> <style> *{ margin: 0; ...
  • div仿checkbox表单样式美化及功能(checkbox的样式不好看)素材在底部: 效果图: window.css 复制代码代码如下: .bj { position: absolute; top: 0; left: 0; bottom: 1px; width: 100 % ; height: 980px; z – ...
  • vue 自定义样式radio单选框 样式美化

    万次阅读 2018-06-28 15:59:55
    "check(index)" type= "radio" >{{ item .label}} div > div > script data() { return { payType: '在线支付' , radios:[ { label: '在线支付' , value : '在线支付' , isChecked: true ...
  • html radio样式美化

    千次阅读 2017-01-06 17:14:37
    radio用自定义切图来美化样式,demo是选择支付方式,如果是文字的话把img标签换成span即可。 html代码: 同一类的,name要统一,设置成一样。 css代码: .order-payicon{ width: ...
  • HTML的checkbox和radio样式美化的简单实例 checkbox: XML/HTML Code复制内容到剪贴板 <style type="text/css">  input[type="checkbox"] { display: none; } input[type="checkbox"] + ...
  • css美化checkbox的样式

    2017-01-12 16:27:00
    使用iCheck插件可以改变checkbox、radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的click事件,所以费了些时间写了一个...
  • 美化 input checkbox 样式,利用图片或者 icon 图标 原理是利用 :checked 状态选择器,替换样式, 默认的 checkbox 效果 隐藏在可视区域之外 <div class="input-box"> <input class="input-check" type=...
  • div仿checkbox表单样式美化及功能

    千次阅读 2014-05-05 17:56:53
    div仿checkbox表单样式美化及功能,使用div图片是checkbox样式变的好看,分享给大家。
  • 复选框,单选框都不好直接用css样式美化,总得用点奇思妙想才行。如果只考虑谷歌内核的浏览器的话,那么用appearance属性可以搞定大部分表单控件的样式。关键是这个appearance属性IE不支持,这就逼得大家另想办法了...
  • 简单 checkbox 样式美化

    2020-03-03 17:09:24
    ;"> ;"> <span class="checkbtn"></span> ...复选框被选择后,修改紧接的 span 样式 ...使用 span 的伪元素 :after 作为选中样式,再...最终样式如下(过渡效果没法截图,大家可以自己试一下d=====( ̄▽ ̄*)b)
  • 代码片段: [removed][removed] [removed][removed] [removed][removed] [removed][removed]
  • html checkbox样式美化

    千次阅读 2018-11-07 17:26:28
    1.html写法 &lt;label class="my_protocol"&gt; &lt;input class="input_agreement_protocol" type="checkbox" /&gt; &.../*隐藏掉我们模型的ch
  • css input checkbox和radio样式美化 2014年9月1日 198716次浏览 在之前的一篇文章中,我已经介绍了input file上传按钮的美化,地址:http://www.haorooms.com/post/css_input_uploadmh ,今天,我们来讲一下...
  • 【HTML】radio和checkbox样式美化

    千次阅读 2016-07-08 17:37:54
    仅提供记录,怕忘记了 效果图: ...样式 .radio-span {  width: 24px;  height: 18px;  padding-top: 3px;  cursor: pointer;;  text-align: center;  margin-right: 10px;  
  • 几款CSS3美化的表格样式

    千次阅读 2012-10-25 20:01:23
    几款CSS3美化的表格样式 table.table1{ font-family: "Trebuchet MS", sans-serif; font-size: 16px; font-weight: bold; line-height: 1.4em; font-style: normal; border-collap
  • 于是,我便美化了复选框的样式,如下图所示: 选中的背景色都不同,根据自己需要自定义。 上代码,HTML <div class="group"> <input type="checkbox" value="one" name="check" id="checkbox_a1" ...
  • input-check"&gt; &lt;input type="checkbox"class="input_check" id="check02"&gt;&lt;label for="check02" class="mr10"&gt;&lt...
  • 论checkbox和radio的样式美化问题 原文:论checkbox和radio的样式美化问题如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1、自己动手写一个,也就是自己写代码实现...
  • checkbox美化

    千次阅读 2018-11-19 11:00:32
    传统的checkbox表单元素是不好看的,而且每个浏览器表现出来的样式还不一样,很多时候我们会借助一些表单美化的插件实现类似开关切换的效果,有些是用 js+css 实现的,而有些则是纯CSS实现的,我们更应该感兴趣的是...
  • 声明:此样式,需要下载图片(如下),原理很简单,就是隐藏了原生的样式( -webkit-appearance:none),用图片替代而已,你也可以根据项目需要选择合适的图片 html: check代码:checkboxClass" > radio代码:...
  • 思路: 美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。 input[type=file]上传...样式一: /*a upload */ .a-upload { padding: 4px 10px; height: 20px; line-heigh...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,904
精华内容 761
关键字:

美化check样式