css美化表单组件的困难

1 .1995年的时候，表单组件在HTML2规范中被添加到HTML，但是由于表单组件的复杂性,实现者选择依靠底层操作系统来管理和渲染他们
2 .由于用户习惯于各自平台的视觉外观，浏览器厂商不愿意对表单控件样式进行调整，到目前为止，要重建所有控件以使他们可美化仍然是非常困难的
3 .css目前可以操作或者说统一表现的表单标签

1 .form:这个好像不需要
2 .fieldset:这个好像不常用
3 .label:
4 .output:标签作为计算结果输出显示（比如执行脚本的输出）。这个标签感觉完全没有必要啊
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
``
4 .表现不一致的：勉强可以控制样式的

1 .legend:
2 .checkbox
3 .radio
4 .placeholder的内容不能以任何标准方式应用样式，但是实现他的所有浏览器也都实现了私有的css伪类或者伪元素。
``
5 .完全不能使用的标签：完全不能控制样式的组件

1 .范围，颜色，日期控件
2 .所有下拉小部件。比如select,option，optiongroup,datalist
3 .文件选择器小部件
4 .progress，
5 .meter:用来显示已知范围的标量值或者分数值,这个可以用来表示密码强度
6 .所有这些小部件的主要问题来自于他们有非常复杂的结构，css不足以表达这些小部件的所有细微部分，如果想定制这些小部件，必须依靠js来构建一个能够应用的DOM树

image.png

基本样式美化

Search字段

1 .搜索框是一个应用css样式有点棘手的文本组件，首先要使用-webkit-apperance专有属性来调整他

.input1{
          border:2px solid #999;
          border-radius: 5px;
          -webkit-appearance: none;
        }
//实测没有什么表现上的区别啊

文本和字体相关

1 .css font和text功能可以被使用到任意组件上，但是，还有以下不同
2 .一些组件不会从他的父元素继承font-family和font-size
3 .一些浏览器使用系统默认的字体和文本
4 .所以可以再表单样式表中增加以下内容

button,input,textarea,select{
  font-family:inherit;
//这还是我第一次见到用这个属性
font-size:100%;
}

盒子模型

1 .所有文本字段都完全支持css模型相关的每个属性，height,width,padding,margin和borer
2 .但是如果想要保持组件的原生外观和感觉，又要一致的大小，需要统一设置box-sizing属性，因为每一个小部件都有自己的边框，padding,margin规则

-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;

3 .这样就可以保证所有元素都占用相同的空间量

定位

1 .html表单部分的定位通常不是问题，除了以下两个组件
2 .legend:别的css元素可以使用，除了定位。本身他位于fieldset父元素的上边框的最顶端。在html流中无法改变他的绝对位置，无法让其远离顶部边框。可以使用position属性将其设为绝对或者相对定位。看下面感觉也没什么不同吧，就是初始位置相对于其他原来说有点怪.legend元素对可访问性非常重要，因为他可以被无障碍技术作为每个fieldset中的表单元素的标签读出来，通常和标题配对，并且在无障碍中被隐藏

本来位置
绝对定位之后，到了里面
相对定位10px,注意原来的位置的空白没有缝合起来

3 .textarea元素：默认情况下，textarea元素是inline-block元素，与文本底线对齐。这一般不是我们想看到的。需要使用vertical-align:top。这和position有什么关系呢

1 .resize:none；让textarea不能调整大小

解决办法2 HTML表单的高级样式

1 .-webkit-apperance:控制表单元素的外观.属性允许您使元素看上去像标准的用户界面元素

1 .normal:正常呈现元素
2 .icon:作为一个小图片的呈现元素
3 .window:作为一个视口呈现元素
4 .button:作为一个按钮呈现元素
5 .menu:作为一个用户选项设定呈现元素选择
6 .field:作为一个输入字段呈现元素
7 .none：不应用任何特殊样式

2 .checkbox和单选按钮

1 .不能用display：none来隐藏复选框，因为后面我们需要把复选框对用户可见。使用display:none。用户不能在访问这个复选框，这就表示复选框不能选择或不选择。
2 .:root伪类可以筛选出新的浏览器。旧的IE还是使用默认的样式，新的浏览器使用新的样式
3 .在label的before伪类里面设置背景图片来实现样式
4 .那现在基本掌握了任意的切换按钮样式了，只要给出图片就好，都不用搞css样式
:root input[type=checkbox]{
            position: absolute;
            left:-1000em;
          }
          :root input[type=checkbox]+label:before{
            content:'';
            display: inline-block;
            width: 16px;
            height: 16px;
            margin: 0 .5em 0 0;
            background-image: url('https://img-blog.csdnimg.cn/img_convert/731a94f69f2e96d548063f6864d8b1c2.png');
            background-repeat: no-repeat;
            background-size: 64px 16px;
            /* 还需要调整下大小才行 */

            vertical-align: bottom;
            position: relative;
            bottom: 2px;
          }

          /* 选中的样式 */
          :root input[type=checkbox]:checked +label:before{
            background-position-x: -14.8px;
          }

替换为这样的选择样式
image.png

3 .select元素的操作

1 .他这里还有一个问题就是说，虽然可以使用，但是不同浏览器的表现都是不一样的

表单css属性各个浏览器的兼容性情况

解决办法1 构建自己的HTML小部件

1 .

解决办法2 使用各种库

1 .uni-form
2 .jqueryUI