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

巴特西

CSS:与input相关的一些样式设置问题

1.与同行元素上下居中对齐

2.placeholder颜色设置

3.设置input弹出软键盘的type与其type属性不同

最新文章

热门文章