【前言】
本文简单介绍一种优化自定义单选和多选框样式的方法
【主体】
原理：（1）利用label关联标签进行模拟，然后将原选择的按钮隐藏；
（2）选中样式设置：input[type="radio"]:checked+label和input[type="checkbox"]:checked+label
（3）利用伪元素添加选中后的√和圆点--content内填入css特殊字符表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>优化单选多选</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
hr{
margin: 20px 0;
}
input[type="radio"],input[type="checkbox"]{
vertical-align: middle;
margin: 0 3px;
}
/*label模拟*/
.checkbox_area label{
display: inline-block;
background: white;
width: 20px;
height: 20px;
vertical-align: text-top;
border:1px solid #d3d3d3;
}
.radio_area label{
box-sizing: border-box;
display: inline-block;
background: white;
width: 20px;
height: 20px;
border: 1px solid gray;
border-radius: 50%;
vertical-align: middle;
}
/*隐藏自带单选多选框*/
.checkbox_area input[type="checkbox"],.radio_area input[type="radio"]{
display: none;
}
/*鼠标悬停时样式*/
.checkbox_area label:hover,.radio_area label:hover{
cursor: pointer;
}
/*多选框选中样式*/
.checkbox_area input[type="checkbox"]:checked+label{
text-align: center;
background: #2783FB;
line-height: 20px;
}
.checkbox_area input[type="checkbox"]:checked+label:after{
content: "\2714";
color: white;
}
/*单选框选中样式*/
.radio_area input[type="radio"]:checked+label{
font-size: 30px;
background: #2783FB;
text-align: center;
line-height: 15px;
}
.radio_area input[type="radio"]:checked+label:after{
content: "\2022";
color: white;
}
.method1{
width: 600px;
height: 300px;
margin: 10px auto;
border:1px solid red;
}
.method1 p{
margin: 10px 0;
}
</style>
</head>
<body>
<div class="method1">
<h3 style="font-size: 15px;font-weight: 100;line-height: 25px;text-indent:2em">
原理：（1）利用label关联标签进行模拟，然后将原选择的按钮隐藏；
（2）选中样式设置：input[type="radio"]:checked+label和input[type="checkbox"]:checked+label
（3）利用伪元素添加选中后的√和圆点--content内填入css特殊字符表
</h3>
<div class="checkbox_area">
<p>（复选框）科目：</p>
语文<input id="chinese" type="checkbox" name="list"><label for="chinese"></label>
数学<input id="math" type="checkbox" name="list"><label for="math"></label>
英语<input id="engilsh" type="checkbox" name="list"><label for="engilsh"></label>
</div>
<hr>
<div class="radio_area">
<p>（单选框）性别:</p>
男<input id="man" type="radio" name="sex"><label for="man"></label>
女<input id="woman" type="radio" name="sex"><label for="woman"></label>
</div>
</div>
</body>
</html>
相关推荐
纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码
包含html单选多选按钮的样式，内含一个demo.html以及对应的demo.css。可以对照着将css文件引入自己的项目。
效果描述： 基于jQuery的一款插件，可以让你的input输入框 无论是单选还是多选，都实现的很漂亮 使用方法： ...1、将CSS样式拷贝过去 2、将index.html中的代码部分拷贝过去即可 (注意保持文件路径正确)
多项选择（单选按钮） 选框 下拉菜单（选择） 日期 时间 电子邮件地址验证 其他…选项 必选选项 标题和描述块 什么不起作用： 需要Google登录的所有内容（收集电子邮件地址*，仅限组织用户等） 这些问题： ...
1)平时和访问过的链接都...添加样式使得：被聚焦的输入域背景变为黄色，单选或多选的选中项的文字显示为红色字；disabled（保存，退出，复位）按钮的字体显示为灰色字；textarea中选中的文字颜色变为白色，背景变为蓝色
表单增加了按钮式的单选及多选 按钮加上悬浮样式 增加了圆角和直角按钮 更新了引用的样式【元件】 新定义了网格间距(分别为默认的0px, small:4px, middle:10px, big:20px) css小图标让位于字体图标而改名 新增...
任何反馈表示赞赏贡献者@ramiabraham @onefinejay去做： 悬停和焦点样式，通过管理员设置中的选项卡式UI 在移动选项上禁用样式每个表单的自定义样式自定义CSS Textarea的语法高亮显示推迟复选框和单选按钮修复选项...
您可以用它来做任何事情： 标签组件手风琴部分多选列表组件选项组件选项清单复选框列表从本质上讲，Tabbordion可以处理状态，提供用于基于CSS的完整样式的工具，管理WAI ARIA并提供出色HTML / DOM结构。 Tabbordion...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
第1章 页面特效 1.1 HTML页面反向显示 1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 1.6 保护自己的网页不被放入框架 1.7 保护自己的网页不被放入框架 1.8 打印页面的出错...
1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点：必须通过指定的客户端软件才能访问服务器...
实例072 通过单选按钮控制其他表单元素是否可用 117 2.4 复选框 117 实例073 不提交表单获取复选框的值 118 实例074 控制复选框的全选或反选 118 实例075 只有一个复选框时控制复选框的全选或反选 119 2.5 密码域 ...
表单构建器目前内置了多达30几种表单项类型，比如：单行文本、多行文本、百度编辑器、markdown编辑器、单选、多选、开关、联动、取色器、图标选择器、图片裁剪等等，只需几行代码，即可实现复杂且人性化的功能。...
在文档的第一个表单中，查找所有的单选按钮(即: type 值为 radio 的 input 元素)。 jQuery 代码: $("input:radio", document.forms[0]); --------------------------------------------------------------------...