发表于： 2020-03-22 09:20:56
1 1269
1）背景介绍：
radio是什么？select是什么？
radio是input元素的type属性的值，type = “radio”定义单选框。
<select> 元素用来创建下拉列表, <select> 元素中的 <option> 标签定义了列表中的可用选项。
radio和select的默认样式是什么？
默认样式是浏览器给设置的样式，不同的浏览器样式有可能不同，radio选中和没选中是两种不同的样式。
为什么要修改？
为了在各个网站上显示效果统一，可以将其修改得更好看。
（2）知识剖析：
用到了label标签，文字写在label标签里，<label> 标签的 for 属性与相关元素的 id 属性相同，点击后面的文字，选中单选按钮。
将原来的默认样式隐藏，再为label添加伪元素，并根据单选按钮的选中和没选中的状态来改变伪元素的样式。
而对于select的修改则是在select外加一个div将其样式覆盖。
（3）常见问题：
怎么修改？
（4）解决方案：
单选按钮可以这样修改：
1，写两个单选按钮
2，为label添加一个伪元素
3，给单选按钮的勾选状态添加不同的样式
4. 把原来的单选按钮隐藏：
Select样式可以这样修改：
给select添加父元素div，目的是为了用div的样式覆盖住select样式。
（5）编码实战：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*为label添加一个伪元素*/
input[type="radio"] + label::before{
content: "";
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
font-size: 18px;
width: 1em;
height: 1em;
margin-right: .4em;
border-radius: 50%;
border: 1px solid #01cd78;
text-indent: .15em;
line-height: 1;
}
/*给单选按钮的勾选状态添加不同的样式*/
input[type="radio"]:checked + label::before{
background-color: #01cd78;
background-clip: content-box;
padding: .2em;
}
/*现在把原来的单选按钮隐藏：*/
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
</style>
</head>
<body>
<input type="radio" name="sex" id="male">
<label for="male">男</label>
<input type="radio" name="sex" id="female">
<label for="female">女</label>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>select</title>
<style>
div {
width: 200px;
height: 40px;
border: 1px solid #000;
border-radius: 5px;
position: relative;
overflow: hidden;
}
select {
border: none;/*清除select的边框样式*/
outline: none;/*清除select聚焦时候的边框颜色*/
width: 100%;/*将select的宽高等于div的宽高*/
height: 100%;
line-height: 40px;
/*隐藏select的下拉图标*/
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* 通过padding-left的值让文字居中 */
padding-left: 60px;
}
/* 使用伪类给select添加自己想用的图标 */
div::after {
content: "";
width: 24px;
height: 28px;
background: url(10-chevron.jpg) no-repeat center;
/* 通过定位将图标放在合适的位置 */
position: absolute;
right: 4px;
top: 50%;
transform: translate(0, -50%);
/* 给自定义的图标实现点击下来功能 */
pointer-events: none;
}
</style>
</head>
<body>
<div>
<select name="" id="">
<option value="">芝士</option>
<option value="">奶油</option>
</select>
</div>
</body>
</html>
（6）拓展思考：隐藏原来的单选按钮时，如果使用display:none;的话，那样会把从键盘tab键切换焦点的队列中完全删除。
于是可采用剪切的方式，让剪切后的尺寸为零，这样就隐藏了原来的单选按钮。
（7）参考文献：
自定义input[type="radio"]的样式 https://www.cnblogs.com/xinjie-just/p/5911086.html
纯css修改下拉列表select的默认样式 https://blog.csdn.net/nuanxiasuiyuan/article/details/75663521
css3中clip属性 https://www.cnblogs.com/MissBean/p/4094658.html
（8）更多讨论：
Q1：background-clip：content-box是什么？
A1：指定绘图区的背景，默认为border-box，背景绘制在边框方框内，设为content-box，背景只在内容区绘制。
Q2：解释一下，labie标签的for，与input的id吧。
A2：<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
Q3：去除三角怎么去除？
appearance:none;
-moz-appearance:none; /* Firefox */
-webkit-appearance:none; /* Safari 和 Chrome */
返回列表
评论