checkbox 更改样式

html:

    <div class="wrap">
            <p>1. 勾选</p>
            <input type="checkbox" id="checkbox_a1" class="chk_1" checked /><label for="checkbox_a1"></label>
            <input type="checkbox" id="checkbox_a2" class="chk_1" /><label for="checkbox_a2"></label>
        </div>

css:

.chk_1{
    display: none;
}

/*******STYLE 1*******/
.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 + label:active {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

.chk_1:checked + label {
    background-color: #ECF2F7;
    border: 1px solid #92A1AC;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
    color: #243441;
}

.chk_1:checked + label:after {
    content: ‘\2714‘;
    position: absolute;
    top: 0px;
    left: 0px;
    color: #758794;
    width: 100%;
    text-align: center;
    font-size: 1.4em;
    padding: 1px 0 0 0;
    vertical-align: text-top;
}

效果如下:

时间: 2024-11-04 19:46:31

checkbox 更改样式的相关文章

android checkBox背景样式及用颜色值实现按钮点击效果

1  使用颜色值(不使用图片)来实现按钮的点击效果: color.xml <color name="head_color">#836FFF</color> <color name="information_title_color">#666666</color> <color name="list_bg_color">#FFF4F4F4</color> <color n

[Android实例] 更改CheckBox的样式

首先在styles.xml添加如下的自定义样式: <style name="mycheckbox" parent="@android:style/Widget.CompoundButton.CheckBox"> <item name="android:button">@drawable/my_checkbox</item> </style> 复制代码 my_checkbox.xml的内容为: <

纯css 更改原生raiod与 checkbox的样式

原文地址: .checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] { left:-9999px; } .k-form { .k-form .checkbox, .k-form .radio { line-height: 25px; color: #0c4757; cursor: pointer;

自定义input[type=&quot;checkbox&quot;]的样式

对复选框自定义样式,我们以前一直用的脚本来实现,不过现在可以使用新的伪类 :checkbox 来实现. 如果直接对复选框设置样式,那么这个伪类并不实用,因为没有多少样式能够对复选框起作用.不过,倒是可以基于复选框的勾选状态借助组合选择符来给其他元素设置样式. 很多时候,无论是为了表单元素统一,还是为了用户体验良好,我们都会选择 label 元素和 input[type="checkbox"] 一起使用.当<label>元素与复选框关联之后,也可以起到触发开关的作用. 思路:

重置 radio 和 checkbox 的样式

代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>选择框样式</title> <style> label { font-size: 12px; cursor: pointer; } label i { font-size: 12px; font-style: normal; display: inline-block; wid

android中checkbox自定义样式

1.首先res/drawable中定义编写如下样式: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/check_true" android:state_chec

用纯css改变默认的radio和checkbox的样式

利用css的label的伪类(::before)代替checkbox和radio效果: 优点:需要图片来调整选中前和选中后的样式,纯css搞定 缺点:兼容性,IE8以下不支持 在线例子: input[type="radio"],input[type="checkbox"] { display: none } input[type="radio"]+label::before,input[type="checkbox"]+lab

小程序: 自定义 -- 单选radio、多选checkbox的样式

1. 单选 radio (1) wxml <view> <!-- 单项选择器radio-group: 内部由多个<radio/>组成 --> <radio-group bindchange="radioChange" > <view wx:for="{{radioData}}" wx:key="index"> <label> <radio value="{{i

Input checkbox 添加样式背景

<style type="text/css">.chk_1 { width: 20px; height: 20px; position: absolute; top: 15px; left: 10px;}.chk_1 + label { background: #ccc; width: 20px; height: 20px; display: inline-block; position: absolute; top: 17px; left: 12px;}.chk_1:ch