在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height。但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是光标的位置是靠上的,导致感官上的不美观。于是对input设置的时候,首先确定字体的大小如font-size:16px,其次我们确定设计稿里input的高度,如input高度为40px,那么此时的代码应该是这样的:input{height:16px;line-height:16px;padding:12px 0;border:1px solid #ddd;},这样的代码在移动端无论是视觉还是输入时都是符合要求的。可是html5出来一个新属性,那就是placeholder,不得不说这个属性的出现解救了以往繁琐的js实现效果,但是,当你给input设置了placeholder后,在pc端看,好像是偏上了那么一点点,好像也不是很影响使用。但是在手机端浏览后,就会发现虽然输入文字可以垂直居中,placeholder里的内容明显的靠上,严重的不美观。

在网上查了一些资料,对于原理性的解释好像基本上没看到。但是国外的网站对这个属性给了一个默认的建议,那就是不要设计input的line-height或者设置line-height为normal,即可。

不过,又发现问题了,虽然在手机端正常,但是在pc端看的时候,placeholder还是有点偏下的感觉。强迫症害死人啊。。。那怎么办。。。设置line-height:1.5em,或者将em换算成实际的px也可以。

移动端input输入placeholder垂直不居中的更多相关文章

  1. 【转】移动端input输入placeholder垂直不居中

    在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是 ...

  2. 解决 placeholder 垂直不居中,偏上的问题

    解决 placeholder 垂直不居中,偏上的问题 安卓浏览器显示placeholder 垂直不居中,而iphone没问题,搜了一下答案,解决方法是把input的line-height去掉就行 参考 ...

  3. ie 下input光标位置垂直不居中问题

    input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高 ...

  4. 移动端input中的placeholder属性垂直

    今天做项目时发现,在手机端用placeholder时,Android手机可以垂直显示:ISO则不能使placeholder垂直;解决办法: .gcddfadf-con-pay-1 input::-we ...

  5. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

  6. input 的 placeholder属性在IE8下的兼容处理

    placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...

  7. css系列:input的placeholder在safari下设置行高失效

    在项目中遇到input的placeholder在safari下设置行高失效的问题,问度娘后未得治原因,倒是有解决办法: 方法一:使用padding使提示文字居中,如果font-size:14px,UI ...

  8. ie8的input的placeholder不显示的解决bug

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. Vue 限制input输入 限数字 或 小数点后两位number

    Vue 限制input输入 小数点后两位number <input type="number" @keydown="handleInput2" place ...

随机推荐

  1. linux 查看CPU、内存、磁盘信息命令

    [1]查看CPU信息 (1)查看CPU信息(型号) cat /proc/cpuinfo | grep name | cut -f2 -d: | uniq -c (2)查看物理CPU个数 cat /pr ...

  2. RPC REST 比较

    REST 和 RPC是两种架构设计风格. 一般情况下REST多用于与外部接口访问时的设计,RPC多用于系统内部的. 为什么这样呢? 1.RPC必然有依赖,REST必然没有,不要抬杠,SDK暂时不算. ...

  3. ceph运维常用指令

    一.集群 1.启动一个ceph 进程 启动mon进程 service ceph start  mon.node1 启动msd进程 service ceph start mds.node1 启动osd进 ...

  4. Android SDK Manager for Mac 在线更新镜像地址截至2017-10-01亲测有效

    虽然国内google被墙了,但仍可利用国内的某些镜像网站实现Android SDK在线更新,使用方法如下: 1.启动 Android SDK Manager ,打开主界面,依次选择『Tools』.『O ...

  5. 介绍Kubernetes监控Heapster

    什么是Heapster? Heapster是容器集群监控和性能分析工具,天然的支持Kubernetes和CoreOS,Kubernetes有个出名的监控agent—cAdvisor.在每个kubern ...

  6. Serializable中的serialVersionUID

    有序列化,就必然有反序列化!比如在A端为UserLogin(见上一篇对象序列化)做了序列化,然后在B端进行反序列化. 首先需要,A端和B端都定义有相同的UserLogin类.可是,万一两端的UserL ...

  7. shell的打印菜单

    #!/bash/bin cat  << EOF   #EOF是变量,可随便设置,但标准是EOF 1)hello world. 2)你好,世界. EOF

  8. hashlib hmac configparser subprocess xlrd xlwt

    hashlib模块:加密 import hashlib # 基本使用 cipher = hashlib.md5('需要加密的数据的二进制形式'.encode('utf-8')) print(ciphe ...

  9. opencv学习之路(40)、人脸识别算法——EigenFace、FisherFace、LBPH

    一.人脸识别算法之特征脸方法(Eigenface) 1.原理介绍及数据收集 特征脸方法主要是基于PCA降维实现. 详细介绍和主要思想可以参考 http://blog.csdn.net/u0100066 ...

  10. bzoj 3597 [Scoi2014] 方伯伯运椰子 - 费用流 - 二分答案

    题目传送门 传送门 题目大意 给定一个费用流,每条边有一个初始流量$c_i$和单位流量费用$d_i$,增加一条边的1单位的流量需要花费$b_i$的代价而减少一条边的1单位的流量需要花费$a_i$的代价 ...