1.input输入框文字靠右垂直居中。
2.placehoder提示同样靠右垂直居中。( placeholder是HTML5 input的新属性,英文意思是占位符,它一般表示input输入框的默认提示值。)
css代码
input {
text-align: right;
font-size:0.3rem;
width:100%;
height:0.78rem;
line-height:0.78rem;
}
浏览器渲染各种正常,然后在低版本(比如某三星的4.3)Android webview 渲染的时候,placeholder 跑偏了.....位于左上角,并且只是placeholder,输入的时候正常居右垂直居中。
纯css解决方案
第一步:实现placehoder垂直居中
css代码
input {
text-align: right;
font-size:0.3rem;
width:100%;
height:0.78rem;
padding:0.24rem 0; //用padding实现居中而不是line-hieght
line-height:0.3rem;
box-sizing: border-box;
}
第二步:使用direction实现placehoder把文本方向设置为“从右向左”:
input::-webkit-input-placeholder { /* WebKit browsers */ direction: rtl;}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ direction: rtl;}
input::-moz-placeholder { /* Mozilla Firefox 19+ but I'm not sure about working */ direction: rtl;}
input:-ms-input-placeholder { /* Internet Explorer 10+ */ direction: rtl;}
语法
E::placeholder{ sRules }
相关参考