高级表单样式
2022-04-17 本文已影响0人
skoll
无法彻底设计的控件的处理方式
1 .下拉框，复杂控件类型比如color，datetime-local，progress,meter等
2 .这些元素在浏览器中具有非常不同的默认外观，虽然你可以通过某些方式来对他们进行样式设置，但是他们内部某些部分实际上是无法设置样式的
3 .可以先做一些简单的样式来让他尺寸一致，背景颜色一样，以及使用外观来摆脱一些系统级样式
select相关
1 .select可以使用apperance,但是option不行
2 .datalist里面的option怎么感觉就变得好看了一点
image.png
3 .使用apperance关掉默认的表现，然后使用伪类生成自定义的箭头
4 .对于option来说，如果想要完全控制选项样式，必须自己写，生成自定义空间
日期输入类型
1 .输入那里是可以改变的，但是空间的内部部分。弹出的日期，日历，可用于递增、递减值的微调器根本无法设置样式，这些事无法使用appperance的
2 .如果真的需要完全控制，必须使用库来生成自定义控件
3 .
范围输入类型
1 .可以控制轨道，但是按钮滑块非常难以设置，而且范围输入，还有很多额外的功能，这里也无法扩展
input[type="range"] {
appearance: none;
-webkit-appearance: none;
background: red;
height: 2px;
padding: 0;
outline: 1px solid transparent;
}
2 .硬来是可以的，但是兼容性需要写很多代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input[type=range] {
-webkit-appearance: none;
margin: 10px 0;
width: 100%;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12.8px;
cursor: pointer;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #ac51b5;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #65001c;
cursor: pointer;
-webkit-appearance: none;
margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ac51b5;
}
input[type=range]::-moz-range-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
background: #ac51b5;
border-radius: 25px;
border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #65001c;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 12.8px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 39px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #ac51b5;
border: 0px solid #000101;
border-radius: 50px;
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
border: 0px solid #000000;
height: 20px;
width: 39px;
border-radius: 7px;
background: #65001c;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
background: #ac51b5;
}
body {
padding: 30px;
}
</style>
</head>
<body>
<input type="range">
</body>
</html>
3 .原文：https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
颜色输入类型
1 .颜色类型的输入控件还不错。在支持的浏览器中，只是给你一个带有边框的纯色块，可以用以下代码删除边框，只留下色块
input{
border:0;
padding: 0;
}
文件输入类型
1 .点击输入的按钮。选择文件的输入列表。一般会有这俩个部分
image.png
2 .这里的按下文件选择器的按钮无法设置样式，无法调整大小和颜色,甚至连字体都不能调整。唯一的操作方式就是关联一个和表单控件有关的label，然后操作这个label
输入的值要自己写列表展示
meter，progress
1 .除了宽度，基本设置不了任何属性,使用apperance：none反而会更糟糕
2 .https://kimmobrunfeldt.github.io/progressbar.js/#examples 直接使用框架吧
3 .感觉随便找个动画库，这里的关键不是样式，而是变化的值要加缓动函数
4 .
最基础版本的样式，起码看起来不那么突兀了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 统一可以设置的样式 */
button,label,input,select,progress,meter{
display: block;
font-family: inherit;
font-size: 100%;
margin: 0;
width: 100%;
box-sizing: border-box;
padding:5px;
height: 30px;
}
input[type='text'],input[type='datetime-local'],input[type='color'],select{
box-shadow: inset 1px 1px 3px #ccc;
border-radius:5px;
}
select{
-webkit-appearance: none;
appearance: none;
width: 200px;
}
label{
margin-bottom:5px;
}
button{
width: 60%;
margin: 0 auto;
}
option{
-webkit-appearance: none;
appearance: none;
width: 90%;
margin:10px;
}
</style>
</head>
<body>
<select name="" id="">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label for="data1">
Datetime
</label>
<input type="datetime-local" id="data1">
<input type="color">
<input type="range">
<progress max='100' value='10'></progress>
<meter id="meter" min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
<button>Submit</button>
</body>
</html>
