zoukankan      html  css  js  c++  java
  • input美化 checkbox和radio样式

    input美化    checkbox和radio样式

    看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式:

     比起html默认的样式,上图这些是不是美观多了呢?并且这样的input美化,无需jquery插件,只要几行css代码就可以。

     思路

     

       思路很简单:(1)将之前的按钮透明度opacity设置为0;(2)外层用div包裹

     实现过程

       图片下载:      

    【html代码】

    <div class="hdz_input_radio checked"><input type="radio" checked="checked" value="1" class="hdz_radio"/></div>

    【css代码】

    .hdz_input_radio{
        width: 14px;
        height: 14px;
        padding-top: 3px;
        background: url(images/radio.png);
    }
    .hdz_input_radio.checked{
        background: url(images/radio_checked.png);
    }
    
    .hdz_radio {
        opacity: 0;
        cursor: pointer;
        -ms-filter:"progid:DXImageTransform.Miscrosoft.Alpha(Opacity=0)";
        filter:alpha(opacity=0);
    }

    checkbox方法一样:

    【html代码】

    <div class="hdz_input_checkbox checked"><input type="checkbox" name=" checkbox" class="hdz_checkbox " value="1"/></div>

    【css代码】

    .hdz_input_checkbox {
        width: 14px;
        height: 14px;
        background: url(images/checkbox.png);
    }
    . hdz_input_checkbox.checked {
        background: url(images/checkbox_checked.png);
    }
    . hdz_checkbox {
        opacity: 0;
        cursor: pointer;
        -ms-filter:"progid:DXImageTransform.Miscrosoft.Alpha(Opacity=0)";
        filter:alpha(opacity=0);
    }

    到这里为止,美化步骤就结束了。但是还缺少了js的点击切换效果。其实切换效果的思路也是比较简单的。

    radio:

    这是单选控件,所以我们只要将一个组内的name值设置成一样,通过改变css的class就可以了。

    $(". hdz_input_radio").on("click",function(){
        $(this).addClass("checked").siblings().removeClass("checked");
    })

    checkbox:

    这是多选控件,所以我们对其class做toggle就可以了。

    $(".hdz_input_checkbox").on("click",function(){
        $(this).toggleClass("checked");    
    })

    或者自己写toggle方法:

    $(".hdz_input_checkbox").on("click",function(){
        $(this).hasClass("checked") ?$(this).removeClass("checked"):$(this).addClass("checked")    
    })
  • 相关阅读:
    WP7开发学习(3):在WP7中使用WCF+log4net 打印并输出日志文件(附源码)
    MongoDB开发学习(2)索引的基本操作
    C#批量添加水印
    获取某一时间戳的月份的开始时间戳和结束时间戳
    php判断一个字符串是否为日期格式
    正则表达式匹配括号引号内容
    PHP获取今日汽油价格接口
    ThinkPHP5 在Nginx环境下开启伪静态
    PHP格式化打印:JSON字符串|对象|数组
    php header ContentType出错
  • 原文地址:https://www.cnblogs.com/yimi8426/p/5059450.html
Copyright © 2011-2022 走看看