修改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;
}

最後的效果：