【前言】
本文简单介绍一种优化自定义单选和多选框样式的方法
【主体】
原理：（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单选多选按钮美化特效.zip"是一个针对网页表单中单选按钮（radio button）和多选按钮（checkbox）的美化解决方案，它允许设计师和开发者创造出与各种字体图标相融合的独特按钮样式，从而提升用户界面的视觉吸引...
纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码 纯css3单选按钮和多选按钮美化样式代码
这个"jQuery单选多选按钮样式美化代码.zip"文件提供了对单选按钮和多选按钮的视觉样式改进的解决方案，特别适合那些希望提升网站或应用界面美观度的开发者。 首先，让我们深入了解一下jQuery。jQuery是由John Resig...
在网页设计中，CSS3（层叠样式表第三版）为单选按钮（radio button）和多选按钮（checkbox）提供了丰富的样式定制功能，极大地增强了用户界面的视觉吸引力和交互体验。本文将深入探讨如何利用CSS3来美化和操作这两种...
单选多选按钮样式 <!-- 在这里放置你的HTML代码 --> ``` 现在，你可以在自己的项目中引入`demo.css`文件，为你的单选和多选按钮赋予同样的样式。通过这种方式，你可以自由地定制按钮的外观，同时保持其功能不...
在网页设计和开发中，美观和用户体验是至关重要的因素，jQuery单选多选按钮美化代码插件正是为了提升这方面效果而设计的。这款插件基于`ion.checkRadio.js`，它能够将传统的HTML单选按钮（radio）和复选框（checkbox...
总之，“jQuery单选多选按钮选中美化特效”是一个利用jQuery和CSS3技术优化用户界面的例子，它展示了如何通过简单的代码实现复杂的效果，提高网页的互动性和美观性。开发者可以根据自己的需求进行定制，将其融入到...
总之，"jQuery单选多选按钮美化"是一个实用的设计技巧，结合jQuery的动态控制和CSS的样式定制，可以让网页中的选择元素更加吸引人，提升用户的操作体验。在实际项目中，还可以进一步扩展，比如添加过渡动画、自定义...
在这个场景中，我们关注的是"CSS3单选多选按钮美化特效"，这是一项利用CSS3技术来改进网页中的选择输入控件，如单选按钮（radio）和复选框（checkbox）的视觉效果和用户体验的设计技巧。 传统的HTML单选按钮和复选...
《jQuery单选多选按钮美化代码插件详解》 在网页设计中，用户交互界面的美观性和易用性是至关重要的。jQuery作为一个强大的JavaScript库，为开发者提供了丰富的工具和插件来实现这些目标。本篇文章将围绕“jQuery...
`jQuery`单选多选按钮美化插件就是为了解决这个问题而诞生的。它利用`jQuery`库的灵活性和`ion.checkRadio.js`插件的功能，为传统的HTML单选按钮（radio）和多选按钮（checkbox）提供了一种优雅的视觉呈现方式。这个...
首先，jQuery单选按钮和多选按钮的美化主要涉及到HTML基础结构的设置、CSS3样式的应用以及jQuery事件的绑定。在HTML中，单选按钮（`<input type="radio">`）和多选按钮（`<input type="checkbox">`）是常见的表单...
总结来说，CSS3单选多选按钮美化特效是现代网页设计的重要组成部分，它不仅能提升网站的视觉效果，还能优化用户的操作体验。通过熟练掌握CSS3的各种选择器和动画技术，并结合字体图标，我们可以创造出富有个性且易于...
1. **单选按钮和多选按钮的美化** 单选按钮和多选按钮通常是HTML表单中用于用户提供单个选择和多个选择的元素。默认样式较为简单，可以通过CSS进行美化。`niceforms-default.css` 文件可能包含以下内容： - 使用`:...
在这个"jQuery单选多选按钮样式美化特效代码"中，提到了四种不同的按钮样式：圆心、圆钩、方心、方钩。这些样式通过CSS定义，可能包括了背景图像、边框、填充、尺寸、边距等多种属性的调整，使得按钮在视觉上更加...