1、清除 input 标签默认样式

      input {
        -moz-appearance: none;
        outline: 0;
        text-decoration: none;
        outline: none;
        border: 0;
      }

 

2、input 标签属性 placeholder 的修改  =》input::webkit-input-placeholder

input::-webkit-input-placeholder {
        font-size: px2rem(22);
        color: rgba(136, 136, 136, 1);
        font-family: Microsoft Yahei;
        width: px2rem(50);
        height: px2rem(60);
        line-height: px2rem(40);
      }

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

3、input 标签可读不可编辑

方法1: onfocus=this.blur() 当鼠标放不上就离开焦点
<input type="text" name="input1" value="中国" onfocus=this.blur()> 

方法2:readonly 

<input type="text" name="www.xxx" readonly="readonly" />
<input type="text" name="input1" value="中国" readonly> 
<input type="text" name="input1" value="中国" readonly="true"> 

注意： readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台会接收到传值


方法3: disabled 
<input type="text" name="input1" value="中国" disabled="true">

readonly="readonly" 推荐

注意： readonly表示此域的值不可修改，仅可与 type="text" 配合使用，可复制，可选择,可以接收焦点，后台会接收到传值

disabled="true" 此果文字会变成灰色，不可编辑，不可点击。 
readOnly="true" 文字不会变色，也是不可编辑的，可点击。


css屏蔽输入：<input style="ime-mode: disabled"> 

有两种方法第一：disabled="disabled"这样定义之后被禁用的 input 元素既不可用，也不可点击。第二：readonly="readonly" 只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄