placeholder 靠右垂直居中/位置兼容

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 }


相关参考

palacehoder设置

CSS direction 属性

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容