博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端input输入placeholder垂直不居中
阅读量:4992 次
发布时间:2019-06-12

本文共 731 字,大约阅读时间需要 2 分钟。

在移动端编写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也可以。

转载于:https://www.cnblogs.com/wzz1020/p/8560176.html

你可能感兴趣的文章
Swift - 内存泄露原因(循环强引用)及解决办法
查看>>
AIDL-Android接口描述语言实现跨进程通讯
查看>>
剑指Offer - 九度1354 - 和为S的连续正数序列
查看>>
LeetCode - Anagrams
查看>>
用MFC时,如果程序崩溃,检查内存,然后注意GDI数量,在任务管理器里选项-查看列-GDI数量...
查看>>
angular(转)
查看>>
ansible简单现网配置
查看>>
数据结构C++版-树
查看>>
JavaScript学习总结--创建对象(3_原型)
查看>>
FZU 2092 收集水晶 dp+bfs
查看>>
Java学习---网页编辑器FCKeditor使用详解
查看>>
IDEA开发React环境配置
查看>>
香港两日游
查看>>
cordova 打包发布正式版 apk
查看>>
常用集合比较
查看>>
二分搜索
查看>>
感觉这周的每日都是累
查看>>
Tarjan求点双连通分量
查看>>
Tomcat项目自动部署脚本
查看>>
Python操作MySQL数据库
查看>>