原生input用法 总结

1：默认数字空间 隐藏 

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

    -webkit-appearance: none;

}

input[type="number"] {

    -moz-appearance: textfield;

} 

重置

input::-webkit-outer-spin-button,

    input::-webkit-inner-spin-button {

       

        -webkit-appearance: number-input !important;

    } 

    /* 重置 input[type="number"] 的样式为默认样式 */

   input[type="number"] {

      -webkit-appearance: number-input!important;

      -moz-appearance: number-input!important ;

      appearance: number-input!important ;

    }

重置失效问题？

2：input中方icon

利用 padding-left 为icon空出位置

3：input中的placeholder 设置为比较透明的严格或者模糊设置

透明颜色

input::placeholder {

        color: rgba(0, 0, 0, 0.3);

}

2：模糊颜色

input::placeholder { opacity: 0.5; /* 设置透明度 */

filter: blur(2px); /* 设置模糊效果 */ }