CSS 美化复选框CHECKBOX-无图片方式

发布时间：2016-09-27, 10:56:36 分类：HTML | 编辑 off 网址 | 辅助

图集1/7

正文 1540字数 706,285阅读

今天和大家分享一个不使用图片美化复选框的方式。来看下效果图吧，如下是3种不同状态下的效果：

一. Html结构

<div class="check-wrap">
     <input type="checkbox" class="icheck" id="icheck" />
     <label for="icheck" class="ilabel"></label>
</div>

Run code

Cut to clipboard

注： label 标签的 for 属性值必须指定为 input 的 id 名称。

二. CSS 代码

.check-wrap{
     position: relative;
     height: 24px;
     width: 24px;
}
.icheck{
     opacity: 0;
}
.ilabel{        
     border-radius: 3px;    
     cursor: pointer;
     display: block;
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}
.ilabel:after{
     content: " ";
     border: 2px solid #DDD;        
     display: block;
     font-weight: bold;
     text-align: center;
     border-radius: 3px;
     width: 20px;
     height: 20px;
 }
 .icheck:checked + .ilabel:after{
     content: "✓";
     border-color: #3f51b5;
     background-color: #3f51b5;
     color: #fff;
  }
  .icheck:indeterminate + .ilabel:after{
     content: "■";
     color: #3f51b5;
     background-color: #FFF;
     border-color: #3f51b5;
  }

Run code

Cut to clipboard

1. 将原有的 input 标签透明度设为0

2. label:after 的宽高设置 20px 是因为 border 占据了4px

3. checkbox 的 indeterminate 状态大家用的可能比较少（效果图中的第2个状态），只能通过 js 进行设置，这种情况通常用在树型结构（即：子节点有选中但并未全部选中的时候父节点的状态）

<script>
     var icheck = document.getElementById("icheck");
     icheck.indeterminate = true;
</script>

Run code

Cut to clipboard

（支付宝）给作者钱财以资鼓励（微信）→

标签: CSS36 美化1 复选框1 inpu1 checkbox4

有过 4 条评论 »

广西南宁市 2017-09-30, 16:56:36

css3美化radio单选框(兼容IE9+)

<style>.radio-beauty-container {
    font-size: 0;
    $bgc: green;
    %common {
        padding: 2px;
        background-color: $bgc;
        background-clip: content-box;
    }
    .radio-name {
        vertical-align: middle;
        font-size: 16px;
    }
    .radio-beauty {
        width: 18px;
        height: 18px;
        box-sizing: border-box;
        display: inline-block;
        border: 1px solid $bgc;
        vertical-align: middle;
        margin: 0 15px 0 3px;
        border-radius: 50%;
        &:hover {
            box-shadow: 0 0 7px $bgc;
            @extend %common;
        }
    }
    input[type="radio"]:checked+.radio-beauty {
        @extend %common;
    }
}
</style>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:00:08,

<style class="cp-pen-styles">.radio-beauty-container {
  font-size: 0;
}
.radio-beauty-container .radio-beauty:hover, .radio-beauty-container input[type="radio"]:checked + .radio-beauty {
  padding: 2px;
  background-color: green;
  background-clip: content-box;
}
.radio-beauty-container .radio-name {
  vertical-align: middle;
  font-size: 16px;
}
.radio-beauty-container .radio-beauty {
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid green;
  vertical-align: middle;
  margin: 0 15px 0 3px;
  border-radius: 50%;
}
.radio-beauty-container .radio-beauty:hover {
  box-shadow: 0 0 7px green;
}
</style></head><body>
<div class="radio-beauty-container">
    <label>
        <span class="radio-name">前端工程师</span>
        <input type="radio" name="radioName" id="radioName1" hidden/>
        <label for="radioName1" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">后端工程师</span>
        <input type="radio" name="radioName" id="radioName2" hidden/>
        <label for="radioName2" class="radio-beauty"></label>
    </label>
    <label>
        <span class="radio-name">全栈工程师</span>
        <input type="radio" name="radioName" id="radioName3" hidden/>
        <label for="radioName3" class="radio-beauty"></label>
    </label>
</div>

Run code

Cut to clipboard

#,广西南宁市,2017-09-30,17:02:03,
css3美化checkbox复选框(兼容IE9+)

<style class="cp-pen-styles">@charset "UTF-8";
.checkbox-beauty-container {
  font-size: 0;
}
.checkbox-beauty-container input[type="checkbox"]:checked + .checkbox-beauty::after {
  content: '✓';
  font-size: 16px;
  font-weight: bold;
  color: green !important;
}
.checkbox-beauty-container .checkbox-name {
  vertical-align: middle;
  font-size: 16px;
}
.checkbox-beauty-container .checkbox-beauty {
  width: 15px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border: 1px solid green;
  display: inline-block;
  margin: 0 15px 0 3px;
  vertical-align: middle;
}

@media screen and (min-width: 1200px) {
  .checkbox-beauty:hover {
    box-shadow: 0 0 7px green;
  }
  .checkbox-beauty:hover::after {
    content: '✓';
    font-size: 16px;
    font-weight: bold;
    color: green;
  }
}
</style>
<div class="checkbox-beauty-container">
   
        <span class="checkbox-name">苹果</span>
        <input type="checkbox" name="checkboxName" id="checkboxName1" hidden/>
        <label for="checkboxName1" class="checkbox-beauty"></label>
  
   
        <span class="checkbox-name">香蕉</span>
        <input type="checkbox" name="checkboxName" id="checkboxName2" hidden />
        <label for="checkboxName2" class="checkbox-beauty"></label>
   
  
        <span class="checkbox-name">橘子</span>
        <input type="checkbox" name="checkboxName" id="checkboxName3" hidden />
        <label for="checkboxName3" class="checkbox-beauty"></label>
   
</div>

Run code

Cut to clipboard

reply | quote | #¹

广西南宁市 2016-09-27, 11:04:12

自定义input[type="radio"]的样式
对于表单，input[type="radio"] 的样式总是不那么友好，在不同的浏览器中表现不一。

为了最大程度的显示出它们的差别，并且为了好看，首先定义了一些样式：
html:

<form action="">
    <div class="sex">
        <div class="female">
            <label for="female">女</label>
            <input type="radio" name="sex" id="female">
        </div>
        <div class="male">
            <label for="male">男</label>
            <input type="radio" name="sex" id="male">
        </div>
    </div>
</form>

Run code

Cut to clipboard

css:

body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
    position: relative;
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
}
.sex label {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
}
.sex input {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

Run code

Cut to clipboard

然后在各个浏览器中观察，会发现有很大的差别：

对于 firefox 浏览器，即便是设置了宽和高，依然是没有效果，input[type="radio"] 的那个圆圈还是初始状态那么大。其它浏览器的表现也不一致，为了达到一致的效果，我们需要做兼容处理。

思路：

1. 将 input[type="radio"] 隐藏， opacity: 0; 置于上层，当我们点击它时，就能正确的响应原本的事件。

2. 自定义一个圆圈，置于下层，模拟原本相似的样式；

3. 用 js 实现选中 input[type="radio"] 时，在其下层的自定义的元素改变原来的背景颜色。

代码：
html:

<form action="">
    <div class="sex">
        <div class="female">
            <label for="female">女</label>
            <input type="radio" name="sex" id="female">
            <span class="female-custom"></span> <!-- 同下面的 span 一样作为自定义的元素 -->
        </div>
        <div class="male">
            <label for="male">男</label>
            <input type="radio" name="sex" id="male">
            <span class="male-custom"></span>    
        </div>
    </div>
</form>

Run code

Cut to clipboard

css:

body { margin: 0; }
input { padding: 0; margin: 0; border: 0; }
.female, .male {
    position: relative; /* 设置为相对定位，以便让子元素能绝对定位 */
    height: 40px;
    line-height: 40px;
    margin-left: 40px;
}
.sex label {
    display: block;
    height: 40px;
    width: 40px;
    line-height: 40px;
    font-size: 20px;
    cursor: pointer;
}
.sex input {
    z-index: 3;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto; /* 这里及以上的定位，可以让该元素竖直居中。(top: 0; bottom: 0;) */
    opacity: 0;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.sex span {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40px;
    margin: auto;
    display: block;
    width: 25px;
    height: 25px;
    border: 1px solid #000;
    border-radius: 50%;
    cursor: pointer;
}        
.sex span.active {
    background-color: #000;            
}

Run code

Cut to clipboard

js:

$("#male").click( function () {
    $(this).siblings("span").addClass("active");
    $(this).parents("div").siblings("div").children("span").removeClass("active");
});
$("#female").click( function () {
    $(this).siblings("span").addClass("active");
    $(this).parents("div").siblings("div").children("span").removeClass("active");
});

Run code

Cut to clipboard

这样处理后，在浏览器中展示效果全部一样了：

扩展：

1. 对于代码中出现的定位，对父元素使用 position: relative; 给子元素使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 能实现让子元素相对于父元素居中(满足水平居中和竖直居中)显示。如果只是需要竖直居中，则不需要添加 right: 0; 和 left: 0; 的样式。

2. 有时当我们不容易确定子元素的高度时，可以这样设置：对父元素 position: relative; 对子元素 position: absolute; top: 10px; bottom: 10px; margin: auto; 这样一来，子元素的高度就是父元素的高度减去20px后的值了，同样，top 和 bottom 支持百分数，可扩展性更强。

优化更新：

需求：

1. 有时候我们需要内联的单选样式；

2. 选中的按钮内的小圆圈不需要占满整个外圈的大小。

思路：

1. 让每一个包裹选择的 div 左浮动；

2. 给父元素添加圆形的外边框，子元素设置一个稍小于父元素大小的背景。

代码：
html:

<form action="">
    <div class="fruit">
        <div class="apple">
            <label for="apple">苹果</label>
            <input type="radio" name="fruit" id="apple">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
        <div class="banana">
            <label for="banana">香蕉</label>
            <input type="radio" name="fruit" id="banana">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
        <div class="orange">
            <label for="orange">橘子</label>
            <input type="radio" name="fruit" id="orange">
            <div class="user-defined">
                <span class="circle"></span>
            </div>
        </div>
    </div>
</form>

Run code

Cut to clipboard

css:

* { box-sizing: border-box; }

body { padding: 50px; }

input { padding: 0; margin: 0; border: 0; }

.fruit:before { content: ""; display: table; }

.fruit:after { content: ""; display: table; clear: both; }

.fruit > div { position: relative; float: left; margin-right: 50px; width: 80px; height: 40px; line-height: 40px; }

.fruit > div:last-child { margin-right: 0; }

.fruit label { display: block; width: 50px; height: 40px; line-height: 40px; cursor: pointer; }

.fruit input { z-index: 3; display: block; opacity: 0; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; cursor: pointer; }

.fruit .user-defined { z-index: 2; position: absolute; top: 0; bottom: 0; left: 50px; margin: auto; width: 30px; height: 30px; border: 1px solid #000; border-radius: 50%; cursor: pointer; }

.fruit .user-defined span.circle  { display: block; width: 24px; height: 24px; margin-top: 2px; margin-left: 2px; background-color: transparent; border-radius: 50%; }

.fruit .user-defined span.active  { background-color: #000; }

Run code

Cut to clipboard

js:

$("input").click(function() {
    $(this).siblings("div").children("span").addClass("active");
    $(this).parents("div").siblings("div").find("span").removeClass("active");
});

Run code

Cut to clipboard

效果显示如下：

reply | quote | #²

广西南宁市 2016-09-27, 11:08:19

自定义input[type="file"]的样式
input[type="file"]的样式在各个浏览器中的表现不尽相同：

另外，当我们规定 input[type="file"] 的高度，并把它的行高设置成与其高度相等后，chrome中难看的样式出现了：

“未选择任何文件”这一行并没有竖直居中。

似乎在 firefox 中好看一些，嗯，我比较喜欢用 firefox。但是这些浏览器中的表现不一致，我们必须做兼容处理。

思路：

1. 自定义与其中一个浏览器表现类似的样式，将其放在下层；

2. 将浏览器本身的表现出来的样式“隐藏掉”， opacity: 0; 置于上层，这样我们点击的才是 input[type="file"] 响应的事件；

3. 选择文件或改变文件后，改变显示 file 的值。

代码：
html:

<form action="" class="activityForm">
　　<div class="file">
    <label for="file">文件：</label>
    <div class="userdefined-file">
    　　<input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何文件">
    　　<button type="button">上传</button>
    </div>
    <input type="file" name="file" id="file">        
　　</div>
</form>

Run code

Cut to clipboard

css:

.file {
　　position: relative;
　　height: 40px;
　　line-height: 40px;
}
.file label {
　　display: inline-block;
}
.userdefined-file {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 2;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　font-size: 0;  /*应对子元素为 inline-block 引起的外边距*/
}
.userdefined-file input[type="text"] {
　　display: inline-block;
　　vertical-align: middle;
　　padding-right: 14px;
　　padding-left: 14px;
　　width: 220px;
　　box-sizing: border-box;
　　border: 1px solid #ccc;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　overflow: hidden;
　　text-overflow: ellipsis;
　　white-space: nowrap;
}
.userdefined-file button {
　　display: inline-block;
　　vertical-align: middle;
　　width: 80px;
　　text-align: center;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　background-color: #f54;
　　border: none;
　　color: #fff;
　　cursor: pointer;
}
.file input[type="file"] {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 3;
　　opacity: 0;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　cursor: pointer;
}

Run code

Cut to clipboard

js:

document.getElementById("file").onchange = function() {
    document.getElementById("userdefinedFile").value = document.getElementById("file").value;
}

Run code

Cut to clipboard

这样处理后，就在各个浏览器中表现一致了：

reply | quote | #³

广西南宁市 2017-06-30, 14:50:46

input复选框单选框样式美化

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        .checkbox {
            padding-left: 20px;
        }

        .checkbox label {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            padding-left: 5px;
        }

        .checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 3px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

        .checkbox label::after {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -20px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }

        .checkbox input[type="checkbox"],
        .checkbox input[type="radio"] {
            opacity: 0;
            z-index: 1;
        }

        .checkbox input[type="checkbox"]:focus+label::before,
        .checkbox input[type="radio"]:focus+label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .checkbox input[type="checkbox"]:checked+label::after,
        .checkbox input[type="radio"]:checked+label::after {
            font-family: "FontAwesome";
            content: "\f00c";
        }

        .checkbox input[type="checkbox"]:indeterminate+label::after,
        .checkbox input[type="radio"]:indeterminate+label::after {
            display: block;
            content: "";
            width: 10px;
            height: 3px;
            background-color: #555555;
            border-radius: 2px;
            margin-left: -16.5px;
            margin-top: 7px;
        }

        .checkbox input[type="checkbox"]:disabled+label,
        .checkbox input[type="radio"]:disabled+label {
            opacity: 0.65;
        }

        .checkbox input[type="checkbox"]:disabled+label::before,
        .checkbox input[type="radio"]:disabled+label::before {
            background-color: #eeeeee;
            cursor: not-allowed;
        }

        .checkbox.checkbox-circle label::before {
            border-radius: 50%;
        }

        .checkbox.checkbox-inline {
            margin-top: 0;
        }

        .checkbox-primary input[type="checkbox"]:checked+label::before,
        .checkbox-primary input[type="radio"]:checked+label::before {
            background-color: #337ab7;
            border-color: #337ab7;
        }

        .checkbox-primary input[type="checkbox"]:checked+label::after,
        .checkbox-primary input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-danger input[type="checkbox"]:checked+label::before,
        .checkbox-danger input[type="radio"]:checked+label::before {
            background-color: #d9534f;
            border-color: #d9534f;
        }

        .checkbox-danger input[type="checkbox"]:checked+label::after,
        .checkbox-danger input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-info input[type="checkbox"]:checked+label::before,
        .checkbox-info input[type="radio"]:checked+label::before {
            background-color: #5bc0de;
            border-color: #5bc0de;
        }

        .checkbox-info input[type="checkbox"]:checked+label::after,
        .checkbox-info input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-warning input[type="checkbox"]:checked+label::before,
        .checkbox-warning input[type="radio"]:checked+label::before {
            background-color: #f0ad4e;
            border-color: #f0ad4e;
        }

        .checkbox-warning input[type="checkbox"]:checked+label::after,
        .checkbox-warning input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-success input[type="checkbox"]:checked+label::before,
        .checkbox-success input[type="radio"]:checked+label::before {
            background-color: #5cb85c;
            border-color: #5cb85c;
        }

        .checkbox-success input[type="checkbox"]:checked+label::after,
        .checkbox-success input[type="radio"]:checked+label::after {
            color: #fff;
        }

        .checkbox-primary input[type="checkbox"]:indeterminate+label::before,
        .checkbox-primary input[type="radio"]:indeterminate+label::before {
            background-color: #337ab7;
            border-color: #337ab7;
        }

        .checkbox-primary input[type="checkbox"]:indeterminate+label::after,
        .checkbox-primary input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .checkbox-danger input[type="checkbox"]:indeterminate+label::before,
        .checkbox-danger input[type="radio"]:indeterminate+label::before {
            background-color: #d9534f;
            border-color: #d9534f;
        }

        .checkbox-danger input[type="checkbox"]:indeterminate+label::after,
        .checkbox-danger input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .checkbox-info input[type="checkbox"]:indeterminate+label::before,
        .checkbox-info input[type="radio"]:indeterminate+label::before {
            background-color: #5bc0de;
            border-color: #5bc0de;
        }

        .checkbox-info input[type="checkbox"]:indeterminate+label::after,
        .checkbox-info input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .checkbox-warning input[type="checkbox"]:indeterminate+label::before,
        .checkbox-warning input[type="radio"]:indeterminate+label::before {
            background-color: #f0ad4e;
            border-color: #f0ad4e;
        }

        .checkbox-warning input[type="checkbox"]:indeterminate+label::after,
        .checkbox-warning input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .checkbox-success input[type="checkbox"]:indeterminate+label::before,
        .checkbox-success input[type="radio"]:indeterminate+label::before {
            background-color: #5cb85c;
            border-color: #5cb85c;
        }

        .checkbox-success input[type="checkbox"]:indeterminate+label::after,
        .checkbox-success input[type="radio"]:indeterminate+label::after {
            background-color: #fff;
        }

        .radio {
            padding-left: 20px;
        }

        .radio label {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            padding-left: 5px;
        }

        .radio label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            border: 1px solid #cccccc;
            border-radius: 50%;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out;
            transition: border 0.15s ease-in-out;
        }

        .radio label::after {
            display: inline-block;
            position: absolute;
            content: " ";
            width: 11px;
            height: 11px;
            left: 3px;
            top: 3px;
            margin-left: -20px;
            border-radius: 50%;
            background-color: #555555;
            -webkit-transform: scale(0, 0);
            -ms-transform: scale(0, 0);
            -o-transform: scale(0, 0);
            transform: scale(0, 0);
            -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        }

        .radio input[type="radio"] {
            opacity: 0;
            z-index: 1;
        }

        .radio input[type="radio"]:focus+label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .radio input[type="radio"]:checked+label::after {
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1);
        }

        .radio input[type="radio"]:disabled+label {
            opacity: 0.65;
        }

        .radio input[type="radio"]:disabled+label::before {
            cursor: not-allowed;
        }

        .radio.radio-inline {
            margin-top: 0;
        }

        .radio-primary input[type="radio"]+label::after {
            background-color: #337ab7;
        }

        .radio-primary input[type="radio"]:checked+label::before {
            border-color: #337ab7;
        }

        .radio-primary input[type="radio"]:checked+label::after {
            background-color: #337ab7;
        }

        .radio-danger input[type="radio"]+label::after {
            background-color: #d9534f;
        }

        .radio-danger input[type="radio"]:checked+label::before {
            border-color: #d9534f;
        }

        .radio-danger input[type="radio"]:checked+label::after {
            background-color: #d9534f;
        }

        .radio-info input[type="radio"]+label::after {
            background-color: #5bc0de;
        }

        .radio-info input[type="radio"]:checked+label::before {
            border-color: #5bc0de;
        }

        .radio-info input[type="radio"]:checked+label::after {
            background-color: #5bc0de;
        }

        .radio-warning input[type="radio"]+label::after {
            background-color: #f0ad4e;
        }

        .radio-warning input[type="radio"]:checked+label::before {
            border-color: #f0ad4e;
        }

        .radio-warning input[type="radio"]:checked+label::after {
            background-color: #f0ad4e;
        }

        .radio-success input[type="radio"]+label::after {
            background-color: #5cb85c;
        }

        .radio-success input[type="radio"]:checked+label::before {
            border-color: #5cb85c;
        }

        .radio-success input[type="radio"]:checked+label::after {
            background-color: #5cb85c;
        }

        input[type="checkbox"].styled:checked+label:after,
        input[type="radio"].styled:checked+label:after {
            font-family: 'FontAwesome';
            content: "\f00c";
        }

        input[type="checkbox"] .styled:checked+label::before,
        input[type="radio"] .styled:checked+label::before {
            color: #fff;
        }

        input[type="checkbox"] .styled:checked+label::after,
        input[type="radio"] .styled:checked+label::after {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="checkbox">
        <input id="checkbox1" class="styled" type="checkbox">
        <label for="checkbox1">
        Default
    </label>
    </div>
    <div class="checkbox checkbox-primary">
        <input id="checkbox2" class="styled" type="checkbox" checked>
        <label for="checkbox2">
        Primary
    </label>
    </div>
    <div class="checkbox checkbox-success">
        <input id="checkbox3" class="styled" type="checkbox">
        <label for="checkbox3">
        Success
    </label>
    </div>
    <div class="checkbox checkbox-info">
        <input id="checkbox4" class="styled" type="checkbox">
        <label for="checkbox4">
        Info
    </label>
    </div>
    <div class="checkbox checkbox-warning">
        <input id="checkbox5" type="checkbox" class="styled" checked>
        <label for="checkbox5">
        Warning
        </label>
    </div>
    <div class="radio">
        <input type="radio" id="singleRadio1" value="option1" name="radioSingle1" aria-label="Single radio One">
        <label></label>
    </div>
    <div class="radio radio-success">
        <input type="radio" id="singleRadio2" value="option2" name="radioSingle1" checked aria-label="Single radio Two">
        <label></label>
    </div>
</body>

</html>

Run code

Cut to clipboard

reply | quote | #⁴

Records:4 1/1 «‹1 ›»

lizhenqiu blog

CSS 美化复选框CHECKBOX-无图片方式

相关日志

有过 4 条评论 »

留下評論