找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS修改 单选按钮和复选按钮显示样式

2018-11-30 21:46:36 分类：CSS 阅读(266) 评论(0)
b   前端开发软件
web前端常用开发软件下载
s打头的前端开发软件

css修改 单选按钮和复选按钮显示样式

在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。
大家都知道，要覆写这两个按钮默认样式比较困难。
在CSS3中，我们可以通过状态选择器“:checked”配合其他标签实现自定义样式。

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>复选单选样式</title>
        <link rel=”stylesheet” href=”style.css” />
    </head>
    <style>
        form {
            border: 1px solid #ccc;
            padding: 20px;
            width: 300px;
        }
        .wrapper {
            margin-bottom: 10px;
        }
        /*复选框*/
        .checkbox-box {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-right: 10px;
            position: relative;
            border: 2px solid orange;
            vertical-align: middle;
        }
        .checkbox-box input {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
        }
        .checkbox-box span {
            position: absolute;
            top: -10px;
            right: 3px;
            font-size: 30px;
            font-weight: bold;
            font-family: Arial;
            -webkit-transform: rotate(30deg);
            transform: rotate(30deg);
            color: orange;
        }
        .checkbox-box input[type=’checkbox’] + span {
            opacity: 0;
        }
        .checkbox-box input[type=’checkbox’]:checked + span {
            opacity: 1;
        }
        /*单选框*/
        .redio-box {
            display: inline-block;
            width: 30px;
            height: 30px;
            margin-right: 10px;
            position: relative;
            background: orange;
            vertical-align: middle;
            border-radius: 100%;
        }
        .redio-box input {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100; /*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
        }
        .redio-box span {
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            position: absolute;
            background: #fff;
            top: 50%;
            left: 50%;
            margin: -5px 0 0 -5px;
            z-index: 1;
        }
        .redio-box input[type=’radio’] + span {
            opacity: 0;
        }
        .redio-box input[type=’radio’]:checked + span {
            opacity: 1;
        }
    </style>
    <body>
        <h2>复选框：</h2>
        <form action=”#”>
            <div class=”wrapper”>
                <div class=”checkbox-box”>
                    <input name=”1″ type=”checkbox” checked id=”usename” />
                    <span>√</span>
                </div>
                <label for=”usename”>体育</label>
            </div>
            <div class=”wrapper”>
                <div class=”checkbox-box”>
                    <input name=”1″ type=”checkbox” id=”usepwd” />
                    <span>√</span>
                </div>
                <label for=”usepwd”>音乐</label>
            </div>
            <div class=”wrapper”>
                <div class=”checkbox-box”>
                    <input name=”1″ type=”checkbox” id=”checkbox3″ />
                    <span>√</span>
                </div>
                <label for=”checkbox3″>读书</label>
            </div>
            <div class=”wrapper”>
                <div class=”checkbox-box”>
                    <input name=”1″ type=”checkbox” id=”checkbox4″ />
                    <span>√</span>
                </div>
                <label for=”checkbox4″>运动</label>
            </div>
        </form>
        <h2>单选框</h2>
        <form action=”#”>
            <div class=”wrapper”>
                <div class=”redio-box”>
                    <input
                        type=”radio”
                        checked=”checked”
                        id=”boy”
                        name=”1″
                    /><span></span>
                </div>
                <label for=”boy”>男</label>
            </div>
            <div class=”wrapper”>
                <div class=”redio-box”>
                    <input type=”radio” id=”girl” name=”1″ /><span></span>
                </div>
                <label for=”girl”>女</label>
            </div>
        </form>
    </body>
</html>

注：

  • 是css的相邻选择符。
    关系选择符只有四种,是 空格 > + ~ （包含选择符、子选择符、相邻选择符、兄弟选择符）

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>复选单选样式</title>
        <link rel=”stylesheet” href=”checkbox.css” />
    </head>
    <style>
        /*复选框*/
        .checkbox-box {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 10px;
            position: relative;
            border: 2px solid #0099ff;
            vertical-align: middle;
        }
        .checkbox-box input {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            margin: 0;
            padding: 0;
        }
        .checkbox-box span.icon {
            position: absolute;
            top: -3px;
            right: 2px;
            font-size: 16px;
            font-weight: bold;
            font-family: Arial;
            color: #0099ff;
        }
        .checkbox-box span.icon:after {
            content: ‘\2713’;
        }
        .checkbox-box input[type=’checkbox’] + span.icon {
            opacity: 0;
        }
        .checkbox-box input[type=’checkbox’]:checked + span.icon {
            opacity: 1;
        }
        /*单选框*/
        .redio-box {
            display: inline-block;
            width: 15px;
            height: 15px;
            margin-right: 10px;
            position: relative;
            border: 2px solid #0099ff;
            vertical-align: middle;
        }
        .redio-box input {
            margin: 0;
            padding: 0;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 100; /*使input按钮在span的上一层，不加点击区域会出现不灵敏*/
        }
        .redio-box span.icon {
            position: absolute;
            top: -3px;
            right: 2px;
            font-size: 16px;
            font-weight: bold;
            font-family: Arial;
            color: #0099ff;
        }
        .redio-box span.icon:after {
            content: ‘\2713’;
        }
        .redio-box input[type=’radio’] + span.icon {
            opacity: 0;
        }
        .redio-box input[type=’radio’]:checked + span.icon {
            opacity: 1;
        }
    </style>
    <body>
        <h2>复选框：</h2>
        <form action=”#”>
            <div class=”wrapper”>
                <div class=”checkbox-box”>
                    <input name=”1″ type=”checkbox” checked id=”usename” />
                    <span class=”icon”></span>
                </div>
                <label for=”usename”>未婚</label>
            </div>
            <div class=”wrapper”>
                <div class=”checkbox-box”>
                    <input name=”1″ type=”checkbox” id=”usepwd” />
                    <span class=”icon”></span>
                </div>
                <label for=”usepwd”>已婚</label>
            </div>
            <div class=”wrapper”>
                <div class=”checkbox-box”>
                    <input name=”1″ type=”checkbox” id=”checkbox3″ />
                    <span class=”icon”></span>
                </div>
                <label for=”checkbox3″>离异</label>
            </div>
            <div class=”wrapper”>
                <div class=”checkbox-box”>
                    <input name=”1″ type=”checkbox” id=”checkbox4″ />
                    <span class=”icon”></span>
                </div>
                <label for=”checkbox4″>丧偶</label>
            </div>
        </form>
        <h2>单选框</h2>
        <form action=”#”>
            <div class=”wrapper”>
                <div class=”redio-box”>
                    <input
                        type=”radio”
                        checked=”checked”
                        id=”boy”
                        name=”1″
                    /><span class=”icon”></span>
                </div>
                <label for=”boy”>男</label>
            </div>
            <div class=”wrapper”>
                <div class=”redio-box”>
                    <input type=”radio” id=”girl” name=”1″ /><span
                        class=”icon”
                    ></span>
                </div>
                <label for=”girl”>女</label>
            </div>
        </form>
    </body>
</html>

html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>checkbox</title>
        <link rel=”stylesheet” href=”checkbox.css” />
        <style>
            input {
                border: none;
                box-sizing: border-box;
                outline: none;
            }
            .item-checkbox {
                position: relative;
                width: 100%;
                height: 40px;
                padding-left: 30px;
            }
            .checkbox {
                position: absolute;
                top: 50%;
                right: 0;
                left: 0;
                z-index: 3;
                display: inline-block;
                cursor: pointer;
                transform: translateY(-50%);
                color: #656565;
            }
            .checkbox input {
                position: relative;
                width: 18px;
                height: 18px;
                display: block;
                border: 0;
                background: 0 0;
                cursor: pointer;
                -webkit-appearance: none;
                margin: 0;
                margin-left: 1px;
            }
            .checkbox input:before {
                display: table;
                width: 100%;
                height: 100%;
                border-width: 1px;
                border-style: solid;
                border-radius: 0;
                background: #fff;
                border-color: #bbb;
                content: ‘ ‘;
                -webkit-transition: background-color 20ms ease-in-out;
                transition: background-color 20ms ease-in-out;
            }
            .checkbox input:after {
                -webkit-transition: opacity 0.05s ease-in-out;
                transition: opacity 0.05s ease-in-out;
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
                position: absolute;
                display: table;
                width: 12px;
                top: 30%;
                left: 19%;
                height: 6px;
                border: 2px solid #fff;
                border-top: 0;
                border-right: 0;
                content: ‘ ‘;
                opacity: 0;
            }
            .checkbox input:before,
            .checkbox input:after {
                box-sizing: border-box;
            }
            .checkbox input:checked:after {
                opacity: 1;
            }
            .checkbox input:checked:before {
                background: #11b7f5;
                border-color: #11b7f5;
                border-radius: 0;
            }
            .item-radiobox {
                position: relative;
                width: 100%;
                height: 40px;
                padding-left: 30px;
            }
            .radio-box {
                position: absolute;
                top: 50%;
                right: 0;
                left: 0;
                z-index: 3;
                display: inline-block;
                cursor: pointer;
                transform: translateY(-50%);
                color: #656565;
            }
            .radio-box input {
                position: relative;
                width: 18px;
                height: 18px;
                display: block;
                border: 0;
                background: 0 0;
                cursor: pointer;
                -webkit-appearance: none;
                margin: 0;
                margin-left: 1px;
            }
            .radio-box input:before {
                display: table;
                width: 100%;
                height: 100%;
                border-width: 1px;
                border-style: solid;
                border-radius: 0;
                background: #fff;
                border-color: #bbb;
                content: ‘ ‘;
                -webkit-transition: background-color 20ms ease-in-out;
                transition: background-color 20ms ease-in-out;
            }
            .radio-box input:after {
                -webkit-transition: opacity 0.05s ease-in-out;
                transition: opacity 0.05s ease-in-out;
                -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
                position: absolute;
                display: table;
                width: 12px;
                top: 30%;
                left: 19%;
                height: 6px;
                border: 2px solid #fff;
                border-top: 0;
                border-right: 0;
                content: ‘ ‘;
                opacity: 0;
            }
            .radio-box input:before,
            .radio-box input:after {
                box-sizing: border-box;
            }
            .radio-box input:checked:after {
                opacity: 1;
            }
            .radio-box input:checked:before {
                background: #11b7f5;
                border-color: #11b7f5;
                border-radius: 0;
            }
        </style>
    </head>
    <body style=”margin:20px;”>
        <h2>多选</h2>
        <label class=”item-checkbox”>
            <label class=”checkbox”>
                <input type=”checkbox” checked=”” /> </label
            >记住账号
        </label>
        <br /><br />
        <label class=”item-checkbox”>
            <label class=”checkbox”> <input type=”checkbox” /> </label>体育
        </label>
        <br /><br />
        <label class=”item-checkbox”>
            <label class=”checkbox”> <input type=”checkbox” /> </label>美术
        </label>
        <br />
        <h2>单选</h2>
        <br />
        <label class=”item-radiobox”>
            <label class=”radio-box “>
                <input type=”radio” checked=”” name=”sex” /> </label
            >男
        </label>
        <br /><br />
        <label class=”item-radiobox”>
            <label class=”radio-box “> <input type=”radio” name=”sex” /> </label
            >女
        </label>
    </body>
</html>

美化单选框
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>美化单选</title>
    </head>
    <body>
        <style>
            input[type=’radio’] {
                -webkit-appearance: none;
                border: 0;
                outline: 0 !important;
            }
            input[type=’radio’]:after {
                content: ”;
                display: block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                text-align: center;
                line-height: 10px;
                font-size: 20px;
                color: #fff;
                border: 3px solid #ddd;
                background-color: #fff;
                box-sizing: border-box;
            }
            input[type=’radio’]:checked:after {
                content: ‘L’;
                transform: matrix(
                    -0.766044,
                    -0.642788,
                    -0.642788,
                    0.766044,
                    0,
                    0
                );
                -webkit-transform: matrix(
                    -0.766044,
                    -0.642788,
                    -0.642788,
                    0.766044,
                    0,
                    0
                );
                border-color: #09f;
                background-color: #09f;
                transition: background-color 1s ease;
            }
        </style>
        <input type=”radio” name=”myradio” />
    </body>
</html>
web前端开发 编程软件下载
软件前端开发晋升制度
前端开发编程软件
» 本文来自：前端开发者 » 《前端开发CSS修改 单选按钮和复选按钮显示样式》
» 本文链接地址：https://www.rokub.com/6904.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论