这是之前在公司做登录注册前后端不分离并且自适应时碰到的一些问题，自己做了总结

设置input标签中placeholder的样式

input::-webkit-input-placeholder{ /*WebKit browsers*/

    font-size: 17px;
    color:skyblue;
    
    }
    
    input::-moz-input-placeholder{ /*Mozilla Firefox*/
    
        font-size: 17px;
         color:skyblue;
    
    }
    
    input::-ms-input-placeholder{ /*Internet Explorer*/ 
    
        font-size: 17px;
         color:skyblue;
    
    }

设置label中字两端对齐：
首先给每个label设置

再给label设置伪元素
注：之前写的时候火狐浏览器不支持，在火狐浏览器上不会有设置的样式效果，当时我给每个label字之间加上了nbsp；空格符号，可能会因为宽度不够将字挤到另一行，这时需要微调label的宽度以及字体大小（注意！！！我当时是将冒号：写在label外面的span标签，因为设置后浏览器兼容问题会将冒号也当成一个字符造成样式达不到想要的效果）

label{
	vertical-align: middle;
    text-align: justify;
    text-align-last: justify;
}

label::after{
    content: "";
    display: inline-block;
    width: 100%;
    }

如果要设置复选框和文字对齐，只需给复选框和文字都设置
vertical-align:middle; 即可

设置表单内容不可修改

<input type="text" readonly="true">

input框在ios中会有阴影以及圆角影响整体美观

input{
    -webkit-appearance: none;
    border-radius:0;
}

input框内有数字或字母会对文本进行拼写检查ios系统中文字底部会出现红点 设置spellcheck属性

<input type="text"  spellcheck="false" />

input框输入已有的信息会有黄色的背景解决方案（透明色暂时没有办法解决） 可能大家会遇到已经注册过的信息会被input框保留，如果选择快捷方式可能底部会有黄色背景

火狐直接给input加filter:none  黄色背景即可取消

在ios手机中取消黄色背景需要设置：
在input中设置autocomplete禁止表单自动填充

<input type="text"  autocomplete="off"/>

input:-webkit-autofill { 
    box-shadow: 0 0 0px 1000px #fff inset !important; 
    下面三个都是设置内容的颜色
    text-fill-color: white; 
    color: #000;
    -webkit-text-fill-color: #000; 
}

移动端键盘事件onkeyup不生效时使用oninput事件来监听手机键盘事件
给表单设置键盘事件，这段代码是当时判断input如果value值大于等于一，清空value
的错号图标显示（cw）为错号图标

firstValue.oninput=function(){
        if(this.value.length>=1){
            cw.style.display="inline-block";
            
        }else{
            cw.style.display="none";
        }
    }

最后写上各浏览器的前缀希望我总结的可以帮的到看到这篇文章的朋友们

-webkit- ：chrome(谷歌)、safari(游猎)
-moz- ： firefox(火狐)
-ms- ：IE
-o- : opera

再来加一个兼容性小问题
在ios手机上操作时，如果使用中文键盘打字母，默认表单会对文本判断产生空格，但是我当时用的是onblur事件判断，因为内容前端验证不能有空格，如果按下回车不会出现异常，但是如果在中文键盘输入字母然后直接点击下一个input框会检测出空格，但是因为空格只存在一瞬间，直接切换后内容里面还是不会有空格，但是前端验证会触发，只需在前端验证前加上定时器即可，注意定时器内的this指向，使用箭头函数（定时器内为我的前端验证，可忽略）

one.onblur=function(v){

        window.setTimeout(()=>{
            if(/\s/g.test(this.value)===true){
            qdone.innerText="账号格式错误,不能有空格";
            
            return;
            }else if(this.value.length<3&&this.value.length>=1){
                qdone.innerText="账号格式错误,长度不小于3位";
                return;
            }else{
                qdone.innerText="";
            }
          
        },1000)
        
    }