CSS:與input相關的一些樣式設置問題

input是HTML中非常重要，非常常用而又不可替代的元素，在於其相關的樣式設置中有時會遇到其他元素不會發生的問題，今天把我印象中的一些小問題和解決方案記錄一下。

1.與同行元素上下居中對齊

關於上下居中的話題還是比較熱門的，過幾天也想專門總結一下元素各種上下居中的方法，今天簡單說說關於input的特殊方法。

最推薦的是flex布局模式，掌握flex布局方式后會發現居中特別簡單，而且在現代瀏覽器中都兼容這種布局方式。

對於塊元素，可能自適應的居中方式需要絕對定位了，

position:absolute;
top:0;
bottom:0;

或者

position:absolute;
top:50%;
left:50%;
transform:translate(-50%;-50%);

這些適用於塊元素的方法都能應用於行內塊元素input，但是感覺太麻煩了，而且脫離了文檔流，對后面元素的布局造成了影響。

對於行內元素，

vertical-align:middle;

是一種很方便的方法，但是貌似input等行內塊元素不吃這一套。

有一種取巧的方法，

height:父元素高度;
line-height:父元素高度;
border:none;
outline:none;

就是input元素占滿所處空間，讓input的文字居中即可。因為為了美觀，input的邊框基本都會被去掉，input的范圍不可見，那么讓文字居中同樣實現了效果，還很方便，在條件適合的時候這種方式個人感覺很實用。

2.placeholder顏色設置

這個沒什么好說的，方法記一下就好

:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #000; opacity:1; 
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #000;opacity:1;
}

input:-ms-input-placeholder{
    color: #000;opacity:1;
}

input::-webkit-input-placeholder{
    color: #000;opacity:1;
}

也可以同時設置字號等

input::-webkit-input-placeholder { /* WebKit browsers*/ 
　　color:#999;font-size:14px;
　　}
input:-moz-placeholder {  /* Mozilla Firefox 4 to 18*/ 
　　color:#999;font-size:14px;
　　}
input::-moz-placeholder {  /* Mozilla Firefox 19+*/ 
　　color:#999;font-size:14px;
　　}
input:-ms-input-placeholder { /* Internet Explorer 10+*/ 
　　color:#999;font-size:14px;
}

3.設置input彈出軟鍵盤的type與其type屬性不同

這個需求看起來莫名其妙，其實還是有他存在的理由的，比如點擊一個輸入框，彈出數字鍵盤，但是用戶還可以輸入數字以外的內容。

什么時候有這種需求呢？比如輸入身份證號碼，有的人需要輸入“X”，所以type應該是text。但是所有人都要從數字開始輸入，彈出字母鍵盤就不太舒服了。

那怎么實現呢

type="number" 
onfocus="this.type='text'"

默認是number類型的，用戶點擊時彈出的也是數字鍵盤，而點擊過后input獲取到焦點出發onfocus事件，這時輸入字母就也是允許的了。如果細心的話在onblur時再把type改回number就可以重復這樣的操作了，沒毛病。