【转】移动端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也可以。
转:http://www.i5yt.com/?p=187
【转】移动端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,模仿 ...
- 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 ...
- 移动端 input 输入框实现自带键盘“搜索“功能并修改X
主要利用html5的,input[type=search]属性来实现,此时input和type=text外观和功能没啥区别: html代码入下: <form action="" ...
随机推荐
- javap(反汇编命令)详解【转】
转自:http://blog.csdn.net/hudashi/article/details/7062668 javap是JDK自带的反汇编器,可以查看java编译器为我们生成的字节码.通过它,我们 ...
- How To Set Up Apache Virtual Hosts on CentOS 6
About Virtual Hosts 虚拟主机,用于在一个单一IP地址上,运行多个域.这对那些想在一个VPS上,运行多个网站的人,尤其有用.基于用户访问的不同网站,给访问者显示不同的信息.没有限制能 ...
- wordpress网站被挂马以及防御方法
wordpress本身的安全性是非常的高的,一般不会被轻易的破解,被挂马,但是我们也不能够过度迷信wordpress的安全性,凡是连接上互联网的服务器和电脑,都存在被破解的风险性.所以我们在日常维护自 ...
- 使用 Bootstrap Typeahead 组件
Bootstrap 中的 Typeahead 组件就是通常所说的自动完成 AutoComplete,功能很强大,但是,使用上并不太方便.这里我们将介绍一下这个组件的使用. 第一,简单使用 首先,最简单 ...
- C#:使用Hashtable实现输出那些用户发表主题最多的信息
构思:先计算各自的数量,那些数量最多,输出详细信息 具体算法如下: public class Count { #region 计算各实体数量 public static Hashtable Entit ...
- MyEclipse+Android 安装配置
1.先安装M有Eclipse 就是不断点:下一步下一步最后finish 激活:http://blog.my-eclipse.cn/myeclipse-2014-crack.html (该网站上 ...
- 转 python range 用法
详细记录python的range()函数用法 使用python的人都知道range()函数很方便,今天再用到他的时候发现了很多以前看到过但是忘记的细节.这里记录一下range(),复习下list的 ...
- 【转】java_web开发入门
转载地址:http://www.cnblogs.com/xiaoqv/archive/2011/12/10/2283348.html 一.Tomcat服务器常见启动问题:(1).Java_home环境 ...
- c# TCPclient
服务端 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
- Poj(1469),二分图最大匹配
题目链接:http://poj.org/problem?id=1469 COURSES Time Limit: 1000MS Memory Limit: 10000K Total Submissi ...