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就可以重复这样的操作了，没毛病。