移动端input输入placeholder垂直不居中
在移动端编写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垂直不居中的更多相关文章
- 【转】移动端input输入placeholder垂直不居中
在移动端编写input输入框时候,为了输入文字与输入框垂直居中,一般情况下,会将input的line-height的高度等于height.但在移动端输入的时候会发现,虽然输入内容确实是垂直居中了,但是 ...
- 解决 placeholder 垂直不居中,偏上的问题
解决 placeholder 垂直不居中,偏上的问题 安卓浏览器显示placeholder 垂直不居中,而iphone没问题,搜了一下答案,解决方法是把input的line-height去掉就行 参考 ...
- ie 下input光标位置垂直不居中问题
input输入框用一个背景图模拟,设置height和line-height一样的高度,使里面的输入文字能够居中, 在FF下出现的情况是:点击input时,输入光标其实上跟input的height一样高 ...
- 移动端input中的placeholder属性垂直
今天做项目时发现,在手机端用placeholder时,Android手机可以垂直显示:ISO则不能使placeholder垂直;解决办法: .gcddfadf-con-pay-1 input::-we ...
- 改变input的placeholder字体颜色
改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...
- input 的 placeholder属性在IE8下的兼容处理
placeholder是input标签的新属性,在使用的时候有两个问题: 1.IE8 下不兼容 处理思路: 如果浏览器不识别placeholder属性,给input添加类名placeholder,模仿 ...
- css系列:input的placeholder在safari下设置行高失效
在项目中遇到input的placeholder在safari下设置行高失效的问题,问度娘后未得治原因,倒是有解决办法: 方法一:使用padding使提示文字居中,如果font-size:14px,UI ...
- ie8的input的placeholder不显示的解决bug
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- Vue 限制input输入 限数字 或 小数点后两位number
Vue 限制input输入 小数点后两位number <input type="number" @keydown="handleInput2" place ...
随机推荐
- 【javascript】随机颜色
调用该方法则会返回一个#xxx的rgb随机颜色 function color1(){ var sum=""; var shuzu2=['a','b','c','d','e','f' ...
- redis 在 php 中的应用(Set篇)
本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) Redis的 Set 是 string 类型的无序集合.集合成员是 ...
- wpf中插入winform控件并获取句柄
因工作需要使用wpf做界面,而有个开发包依赖picturebox控件,上网研究了一下,总算弄通了. 首先在项目中添加引用System.Windows.Forms与WindowsFormsIntegra ...
- springmvc整合swagger
前言 Swagger 是一个规范和完整的框架,用于生成.描述.调用和可视化 RESTful 风格的 Web 服务.总体目标是使客户端和文件系统作为服务器以同样的速度来更新.文件的方法,参数和模型紧密集 ...
- Java反射操作成员变量 Class can not access a member with modifiers "*"
fields[j].set(obj, val); 报: Exception in thread "main" java.lang.IllegalAccessException: C ...
- 【题解】Luogu P5251 [LnOI2019]第二代图灵机
原题传送门 前置芝士:珂朵莉树 珂朵莉树的主要功能是区间赋值 这道题还算明显(操作2) 一开始看见这题觉得很毒瘤,但仔细想想发现颜色和数字之间没有什么关系 我们一共要维护三个东西: 1.区间和:树状数 ...
- 启动Weblogic问题集锦
报错1:Could not obtain the localhost address. The most likely cause is an error in the network configu ...
- 0x14哈希之兔子兔子
参考链接:https://www.cnblogs.com/wyboooo/p/9813428.html 题目链接:https://www.acwing.com/problem/content/140/ ...
- Appium 框架工作流程及原理
目前Appium框架可以时支持android 和 ios 两个操作系统的App自动化测试,咱们分别对以下两款操作系统的工作流程进行说明. 一.appium-Android工作流 在Android端,a ...
- sqlmap学习笔记
SQLmap 神仙工具Orz.需要安装python2.7环境. 语法 -u 指定url --is-dba 查询是否为数据库管理员(database administrator) --dbs 查询数据库 ...