关于项目里input框样式的小总结

前段时间做项目的时候产生了一个需求：

1、使用input框显示后端传来的数据；

2、在数据未显示之前，仅显示默认的提示数据，除此之外什么都没有；

3、不显示透明边框、不可更改、鼠标在对应位置不改变形状；

 嗯~上边点都是很简单的点，可突然过来用就蒙了，汇总下。

第一条就没啥好说的了，根据需求使用ajax来拿后端的值，不做赘述。

那么第二条，我们都知道placeholder="xxxx"来显示默认的数据，这里要说的是更改placeholder的样式，如下：

<style>     
      input::-webkit-input-placeholder {
         color: #aab2bd;
         font-size: 25px;
         text-align: center;
     }
</style>

这个可以随意扩展哈，我就用了这么多。

那关于第三条，我们有时候在进行处理的时候，尽管边框设置已经为0了，但是点一下，依旧会出现那种透明的框，感觉就很难看，如何处理，让它没有光标、没有透明框、不可更改呢？

//不显示迷之背景和轮廓，结合使用效果更佳
background-color:transparent;   //背景设置透明
outline:none;   //没有轮廓

onfocus=this.blur()  //失焦，就可以避免被更改
cursor:default;    //设置光标为默认值，这个地方就可以随心所欲啦，想设什么设什么

都是一些小细节，但是突然要用，找起来很费劲，总结在这。