单选框、复选框美化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #E4E1EA;
    font: normal 17px/1.5 Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
    color: #5E5F63;
}
.wrapper {
    width: 200px;
    margin: 20px auto;
}
p {
    margin: 15px 0 5px 0;
}
li span {
    display: inline-block;
    vertical-align: top;
}
strong {
    font-weight: bold;
}
.radio-btn input[type="radio"], .check-box input[type="checkbox"] {
    visibility: hidden;
}
/*Custom checkbox*/
 .check-box {
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: inline-block;
    margin: 2px 7px 0 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 1px #ccc;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘, endColorstr=‘#ededed‘, GradientType=0);
    border: 1px solid #ccc;
}
.check-box i {
    background: url(‘css/check_mark.png‘) no-repeat center center;
    position: absolute;
    left: 3px;
    bottom: -15px;
    width: 16px;
    height: 16px;
    opacity: .5;
    -webkit-transition: all 400ms ease-in-out;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    -webkit-transform:rotateZ(-180deg);
    -moz-transform:rotateZ(-180deg);
    -o-transform:rotateZ(-180deg);
    transform:rotateZ(-180deg);
}
.checkedBox {
    -moz-box-shadow: inset 0 0 5px 1px #ccc;
    -webkit-box-shadow: inset 0 0 5px 1px #ccc;
    box-shadow: inset 0 0 5px 1px #ccc;
    border-bottom-color: #fff;
}
.checkedBox i {
    bottom: 2px;
    -webkit-transform:rotateZ(0deg);
    -moz-transform:rotateZ(0deg);
    -o-transform:rotateZ(0deg);
    transform:rotateZ(0deg);
}
/*Custom radio button*/
 .radio-btn {
    width: 20px;
    height: 20px;
    display: inline-block;
    float: left;
    margin: 3px 7px 0 0;
    cursor: pointer;
    position: relative;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    border: 1px solid #ccc;
    box-shadow: 0 0 1px #ccc;
    background: rgb(255, 255, 255);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(47%, rgba(246, 246, 246, 1)), color-stop(100%, rgba(237, 237, 237, 1)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(246, 246, 246, 1) 47%, rgba(237, 237, 237, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#ffffff‘, endColorstr=‘#ededed‘, GradientType=0);
}
.checkedRadio {
    -moz-box-shadow: inset 0 0 5px 1px #ccc;
    -webkit-box-shadow: inset 0 0 5px 1px #ccc;
    box-shadow: inset 0 0 5px 1px #ccc;
}
.radio-btn i {
    border: 1px solid #E1E2E4;
    width: 10px;
    height: 10px;
    position: absolute;
    left: 4px;
    top: 4px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
.checkedRadio i {
    background-color: #898A8C;
}
</style>
</head>
<body>
<div class="wrapper">
    <ul>
        <li>
            <p>Gender:</p>
        </li>
        <li>
            <input type="radio" name="radio-btn" />Male</li>
        <li>
            <input type="radio" name="radio-btn" />Female</li>
    </ul>
    <ul>
        <li>
            <p>Favorite music:</p>
        </li>
        <li>
            <input type="checkbox" name="check-box" /> <span>Pop music</span>

        </li>
        <li>
            <input type="checkbox" name="check-box" /> <span>Rock music</span>

        </li>
        <li>
            <input type="checkbox" name="check-box" /> <span>Rap music</span>

        </li>
        <li>
            <input type="checkbox" name="check-box" /> <span>Hiphop music</span>

        </li>
    </ul>
</div>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(function(){
        $(‘input[name="radio-btn"]‘).wrap(‘<div class="radio-btn"><i></i></div>‘);
        $(".radio-btn").on(‘click‘, function () {
            var _this = $(this),
                block = _this.parent().parent();
            block.find(‘input:radio‘).attr(‘checked‘, false);
            block.find(".radio-btn").removeClass(‘checkedRadio‘);
            _this.addClass(‘checkedRadio‘);
            _this.find(‘input:radio‘).attr(‘checked‘, true);
        });
        $(‘input[name="check-box"]‘).wrap(‘<div class="check-box"><i></i></div>‘);
        $.fn.toggleCheckbox = function () {
            this.attr(‘checked‘, !this.attr(‘checked‘));
        }
        $(‘.check-box‘).on(‘click‘, function () {
            $(this).find(‘:checkbox‘).toggleCheckbox();
            $(this).toggleClass(‘checkedBox‘);
        });
    });
</script>
</body>
</html>

时间： 2024-07-30 22:46:51

单选框、复选框美化的相关文章

关于通过jq /js 实现验证单选框复选框是否都有被选中

今天项目中遇到一个问题就是要实现,单选框,复选框同时都被选中才能进行下一步的问题,开始用js原生来写怎么写都觉得不合适,通过for循环得出复选框被选中的,在通过for循环得出单选框被选中的,问题来了得出来的值怎么做判断的 ,到现在也没弄明白. 最后果断用jq来实现,刚开始也是怎么都不行最后发现clss的值被我写错了哎剁手! 好了下面上jq 实现验证单选框复选框有没有同时被选中: <div class="tab-stpp" id="tab-s

ops-web运维平台-create.jsp-mootools下拉框-复选框

create.jsp页面的,body部分 <body onload="Page.init('${pageError}','${pageMessage}',${isSubmit},true)"> <div id="title">${pageTitle}</div> <s:form id="MYFORM" action="%{pageAction}" method="post&q

jquery单选框复选框表格高亮选中

单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head&g

jqurey实现单选框 ,复选框,下拉列表

1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="

下拉框和单选框复选框的选中的值

1.下拉框的选中值 <select id="select"> <option value="1">1</option> <option value="2">2</option> </select> 第一种:$("select option:checked").val(); 第二种:$("#select").find("opti

selenium 单选框/复选框定位

1.单选框radio定位: 直接定位即可 driver.find_element_by_id("*****") 2.复选框checkbox定位: 直接定位即可 driver.find_element_by_id("*****") 3.复选框全部勾选定位: (1)可以一个一个勾选定位 (2)可以定位一组元素复选框的type=checkbox,这里可以用xpath语法:.//*[@type='checkbox'] drvier.find_elements_by_xpa

自学篇之-----纯css做的漂亮的单选框复选框样式

<!DOCTYPE html><html><head><title>checkbook</title><meta charset="utf-8" /><script type="text/javascript" src="jquery-1.10.2.min.js"></script> <style type="text/css"

猎豹MFC--对话框复选框单选按钮

使用单选按钮要注意:单选键按钮的顺序必须是连续的,如果不是连续的一定要调整一下设置分组为true 初始化默认值:打开源文件找到初始化对话框: 开始ID按钮到最后一个按钮选中最后一个: 效果如下: 添加事件处理函数后在该函数内填写失效函数: 失效后擦出背景: 选中矩形画矩形: 为绿色复选框添加变量代码: 调用上一个事件处理函数. 调用蓝色: 圆形设置也一样: 来自为知笔记(Wiz)

js操作复选框复选框

//复选框点击事件 function checkAll(){ let tp=$("#tp").val(); let all=$("input[name='id']"); if(tp==1){for(let i=0;i<all.length;i++){ all[i].checked=true; } }else{for(let i=0;i<all.length;i++){ all[i].checked=false; } } } js操作复选框.改变选中效果

js单选和复选框

http://blog.csdn.net/chelen_jak/article/details/44827393 http://www.gbtags.com/technology/jquerynews/jqueryplugin4checkboxandradio/ http://www.17sucai.com/pins/tag/3836.html