修改input输入框的样式【简单demo】

如果我们不想用现有各种UI组件库的input样式那么我们可以自己设计只属于我们自己的样式~

修改input输入框的样式很简单，我们只需要把input的样式都去除掉，然后弄个假的input覆盖即可，与我们之前做的复选框类似。

下面开始先做三个input输入框【html代码】：

<div class="input_control">
  <input type="text" class="form_input" placeholder="输入你的手机号"/>
</div>
<div class="input_control">
    <input type="password" class="form_input" placeholder="输入你的密码"/>
</div>
<div class="input_control">
    <input type="email" class="form_input" placeholder="输入你的邮箱"/>
</div>

而后去处掉他原本的样式并加入我们想要的样式【css代码】

.input_control{
    width:360px;
    margin:20px auto;
}
input[type="text"],input[type="password"],input[type="email"]{
    /* 清除原有input样式 */
    -web-kit-appearance:none;
    -moz-appearance: none;
    outline:0;
    /* 设置我们要的样式 */
    box-sizing: border-box;
    text-align:center;
    font-size:1.2em;
    height:2.5em;
    border-radius:6px;
    border:1px solid #c8cccf;
    color:#6a6f77;
    display:block;
    padding:0 1em;
    text-decoration:none;
    width:100%;
}
input[type="password"]:focus,input[type="email"]:focus,input[type="text"]:focus{
    border:1px solid #ff7496;
}
/* 更改placeholder的颜色，笔者是为了让效果更明显选用了红色 */
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: red;
}
input::-webkit-input-placeholder{
    color: red;
}

最后的效果：