线CSS美化radio和checkbox

来源：互联网发布：仓储数据库概念设计编辑：程序博客网时间：2024/06/05 16:20

HTML代码：

radio:

<div class="form-item"><h2>线路类型</h2><label>    <input type="radio" class="radio-input" name= "lineType" checked>   <span class = "radio-span"></span>全部</label> <label >    <input type="radio" class="radio-input" name= "lineType">   <span class = "radio-span"></span>直发</label> <label >    <input type="radio" class="radio-input" name="lineType">    <span class = "radio-span"></span>经停</label> </div>

checkbox:

<div class="form-item"><h2>出发时段</h2><label>    <input name="startRange" value="00:00-06:00" type="checkbox" class="radio-input">    <span class="checkbox-span radio-span"></span> 00:00 - 06:00</label><label>    <input name="startRange" value="06:00-12:00" type="checkbox" class="radio-input">    <span class="checkbox-span radio-span"></span> 06:00 - 12:00</label><label>    <input name="startRange" value="12:00-18:00" type="checkbox" class="radio-input">    <span class="checkbox-span radio-span"></span> 12:00 - 18:00</label><label>    <input name="startRange" value="18:00-24:00" type="checkbox" class="radio-input">    <span class="checkbox-span radio-span"></span> 18:00 - 24:00</label></div>

CSS：

.form-item {    border: 1px solid #e9e9e9;    margin: 5px 5px;    text-align : center;}.form-item h2 {    font-size: 14px;    font-family: '宋体';    border-bottom: 1px solid #e9e9e9;    background-color: #D7EBF9;    text-indent : 15px;    height: 30px;    line-height: 30px;}.form-item label {margin: 10px 20px 10px 0;display: block;font-size : 14px;color:rgba(0,0,0,0.76);}.radio-input {display: none}.radio-span {background-color: #fff;border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 100%;display: inline-block;height: 16px;margin-right: 10px;margin-top: -1px;vertical-align: middle;width: 16px;line-height: 1;}.radio-input:checked+.radio-span:after {background-color: #60afff;border-radius: 100%;content: "";display: inline-block;height: 12px;margin: 2px;width: 12px}.checkbox-span.radio-span, .radio-input:checked+.checkbox-span.radio-span:after{border-radius: 0}

效果图：

0 0