CSS 实现自定义样式的单选框与多选框

来源：互联网发布：淘宝上的dota2 编辑：程序博客网时间：2024/06/05 02:05

前端在开发的过程中，经常会遇见使用单选框以及多选框的情况，但是默认的选框按钮的样式单一，一般我们需要去自定义一些选框按钮的样式；

通常情况下，单选、多选为方便自定义样式，一般会采用input+label去实现，这里实现的原理主要是运用了label标签的for属性；

for 属性规定 label 与哪个表单元素绑定。

1. 单选框
这里写图片描述

实现方式：input type=radio + label
HTML：

<body>    <div class="box">        <input type="radio"  id="radio1"  name="radio"  checked="checked"/><label for="radio1">选项一</label>    </div>    <div class="line"></div>    <div class="box">        <input type="radio"  id="radio2"  name="radio"/><label for="radio2">选项二</label>    </div>    <div class="line"></div>    <div class="box">        <input type="radio"  id="radio3"  name="radio"/><label for="radio3">选项三</label>    </div>    <div class="line"></div>    <div class="box">        <input type="radio"  id="radio4"  name="radio"/><label for="radio4">选项四</label>    </div>    <div class="line"></div>    <div class="box">        <input type="radio"  id="radio5"  name="radio"/><label for="radio5">选项五</label>    </div>    <div class="line"></div></body>

CSS:

<style type="text/css">            *{                margin: 0px;                padding: 0px;                border: none;                box-sizing: border-box;                outline: none;            }            .box{                width: 100%;                height: 50px;                text-align: center;            }            input{                display: none;            }            label{                width: 100%;                height: 100%;                display: inline-block;                position: relative;                line-height: 50px;                color: #999;            }            label:active{                background: #EEEEEE;            }            label:after{                content: "";/*必须设置*/                display: inline-block;                width: 20px;                height: 20px;                border: 1px solid green;                position: absolute;                top: 15px;                left: 15px;                border-radius: 20px;            }            input:checked+label:after{                background-color: green;            }            .line{                width: 100%;                height: 1px;                background: #ccc;                opacity: 0.2;            }        </style>

2. 多选框
这里写图片描述

实现方式：input type=checkbox + label

HTML:

<body>        <div class="box">            <input type="checkbox"  id="checkbox1"/><label for="checkbox1">选项一</label>        </div>        <div class="line"></div>        <div class="box">            <input type="checkbox"  id="checkbox2"/><label for="checkbox2">选项二</label>        </div>        <div class="line"></div>        <div class="box">            <input type="checkbox"  id="checkbox3"/><label for="checkbox3">选项三</label>        </div>        <div class="line"></div>        <div class="box">            <input type="checkbox"  id="checkbox4"/><label for="checkbox4">选项四</label>        </div>        <div class="line"></div>        <div class="box">            <input type="checkbox"  id="checkbox5"/><label for="checkbox5">选项五</label>        </div>        <div class="line"></div>    </body>

css:

    <style type="text/css">            *{                margin: 0px;                padding: 0px;                border: none;                box-sizing: border-box;                outline: none;            }            .box{                width: 100%;                height: 50px;            }            input{                display: none;            }            label{                width: 100%;                height: 50px;                display: inline-block;                line-height: 50px;                position: relative;                text-align: center;            }            label:active{                background: #EEEEEE;            }            label:after{                content: "";                width: 20px;                height: 20px;                border: 1px solid green;                border-radius: 20px;                display: inline-block;                position: absolute;                top: 15px;                left: 15px;            }            input:checked+label:after{                background-color: green;            }            .line{                width: 100%;                height: 1px;                background: #CCCCCC;                opacity: 0.3;            }    </style>

CSS自定义选框样式Demo下载

阅读全文

0 0