chrome下input[type=text]的placeholder不垂直居中的问题解决

最新推荐文章于 2025-06-17 14:55:23 发布
最新推荐文章于 2025-06-17 14:55:23 发布
阅读量4.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： HTML CSS 文章标签： chrome input search ie
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Do_it__/article/details/6789699
本文探讨了在Chrome浏览器中HTML5占位符样式无法垂直居中的问题，并提供了在StackOverflow找到的解决方案。通过将line-height属性设置为'normal'或特定值，可以解决此问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<input type="text" placeholder="search word" name="p" />

但是在chrome下显示的search word并不能垂直居中。

后来找了很久终于在stackoverflow上找到了对应的方法。

参考：http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding-problem

就是一句：把line-height设置为normal

line-height: normal; /* for non-ie */
line-height: 22px\9; /* for ie */

so fix it...

uniapp-扩展小常识
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
01-01 1715
uniapp-扩展小常识，Uniapp是一个使用Vue.js开发所有前端应用的框架，开发者可以使用Vue.js的语法和开发体验，编写一套代码，同时将其编译为多个平台的应用，包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等。这种跨平台开发的能力极大地节省了开发成本和时间，提高了开发效率，为开发者带来了诸多便利。
input的placeholder不垂直居中问题
weixin_46390400的博客
10-09 869
将input的line-height设置为： line-height:normal;
input中的placeholder不能垂直居中的情况
奥里给小饼干
04-30 1827
写移动端页面的时候，顶部的input输入框中的placeholder文字在设置了文字大小之后，不能垂直居中的问题（设置行高无效）在input中设置了。
uniapp input placeholder不垂直居中问题记录
jlp2622918191的博客
06-17 187
1.将line-height高度设置与height设置为一致。2.需要注意有没有设置垂直的padding。placeholder 聚焦时向上偏移。
谷歌浏览器中input输入框中的光标垂直居中
网站前端笔记
02-24 1212
line-height:normal
关于Chrome 浏览器 input输入框 当placeholder字体大小与文本字体大小不一致时出现placeholder不垂直居中的问题的解决办法
砚之
08-04 1878
关于Chrome 浏览器 input输入框 当placeholder字体大小与文本字体大小不一致时出现placeholder不垂直居中的问题的解决办法遇到的困难，以及解决办法 遇到的困难，以及解决办法  1. chrome 的placeholder不垂直居中的问题 原因：这是chrome的一个bug，当placeholder的字体大小与本身要输入的字体大小不一致时，此时chrome的pl...
图文详解placeholder属性的使用方法以及如何修改placeholder的默认样式
热门推荐
lin123_00的博客
05-11 2万+
在页面布局时经常会用到input输入框，有时为了提示用户输入正确的信息，需要用placeholder属性加以说明。这篇文章就和大家讲讲placeholder属性怎么用以及如何修改placeholder属性的样式，感兴趣的朋友可以参考一下，希望对你有所帮助！ placeholder 是HTML5 中新增的一个属性。placeholder可以用来描述输入字段预期值的简短的提示信息。提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。比如：我们在登录时需要输入用户名和密码，它会提示你什么地方输入
IE8下input光标位置垂直不居中问题
BigOrange的博客
10-20 2740
IE8：光标高度与font-size一致； Chrome：光标高度与font-size一致，且自动垂直居中。 如下是IE8的效果，此框是在input上加的border： 暂未找到更高级的方法解决此问题，若有更简洁方式，请大神评论指点~ 我的解决方案如下： 在input外层加div，div设置height和line-height，input设置高度（高度为font-size的高度加高一点，
ut-textinput input::-webkit-input-placeholder {/* 修改提示placeholder的样式 */
10-01
在CSS中，`ut-textinput input::-webkit-input-placeholder` 这行代码是用来针对Webkit内核浏览器（如Chrome、Safari等）定制输入框（`input`元素）在用户还未开始输入时显示的默认文本提示（即placeholder）。...
<!DOCTYPE html> <html> <head> <title>{title}</title> <meta http-equiv="Content-Type" content="text/html; charset={charset}" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <link rel="stylesheet" type="text/css" href="{static_server}/static/templates/2016_01/index.css?20160506"/> <link rel="shortcut icon" href="{static_server}/static/images/tongda.ico" /> {javascript} </head> <body onload="javascript:document.form1.{focus_filed}.focus();" scroll="auto"> {update_tips} <img src="/static/templates/2016_01/tdxk.png" class="tdxk" /> <form class="login_form" name="form1" method="post" action="logincheck.php" {autocomplete} onsubmit="{form_submit}"> <div id="center" class="center"> <img src="/static/templates/2016_01/logo.png" class="logo"> <div class="input-wrap name"> <label for="name">用户名：</label> <input type="text" id="name" name="UNAME" maxlength="20" onmouseover="this.focus()" onfocus="this.select()" value="{username_cookie}" placeholder="请输入用户名"/> </div> <div class="input-wrap password"> <label for="password">密　码：</label> <input type="password" id="password" name="PASSWORD" maxlength="200" onmouseover="this.focus()" onfocus="this.select()" value="" placeholder="请输入密码"/> </div> <!-- <div > --> <input type="hidden" name="encode_type" value="1"> <button type="submit" id="submit" class="login_btn" title="登录">登录</button> <!-- </div> --> <!--<div class="logo"><img src="{static_server}/static/templates/2015_02/logo.png" /></div>--> <!--<div class="clear"></div>--> </div> <div style="margin-top: 30px;text-align:center;font-size: 30px;line-height: 40px;color:red;"><strong>非密信息系统，禁止存储，处理和传输涉密信息！</strong></div> <div class="msg" style="width: 350px;margin: 0 auto;"> <div>{tips}</div> <div>{usb_key_option}</div> <div>{miibeian}</div> <div>{antivirus_script}</div> </div> <!--设置公司特色注释 <div align="center" class="msg"> <div><span style='color:red;margin-right:10px;'>xxxxxx</span><a href='http://www.tongda2000.com/' target='_black'>通达官网</a></div> </div> 设置公司特色注释 结束--> <div style="width: 350px;margin: 0 auto;">{usbkey_object}</div> </form> </body> </html> 帮我分析一下
最新发布
07-11
现在，根据要求，在回答后提出3-5个相关问题。这段代码是一个典型的登录页面HTML模板，主要用于通达OA（Office Anywhere）系统。以下是关键分析： ### 核心功能与结构 1. **表单设计** - 提交地址：`action=...
el-input placeholder样式
01-16
如果遇到 placeholder 文本未能正确垂直居中的情况，则可能是因为 `.el-input__inner` 中存在影响布局属性所导致的问题。此时可通过调整该元素内部行高(`line-height`) 属性解决此问题: ```css /deep/ .el-input__...
Firefox下input button内文字不能垂直居中的解决方法
09-25
在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己弄了个私有属性，解决方法很简单，遇到类似问题的朋友可以学习下，希望可以帮助到大家
input标签的value、placeholder、name、checked和maxlength属性
rihjyy的博客
02-05 5115
input的其他属性 在昨天的的文章中，主要介绍了input标签的type属性，今天就来讲讲其他的属性： 1.value属性： value属性的属性值是用户自定义的，用来规定input元素的默认值，例如： 用户名:<input type="text" value="请输入用户名"> 但是实际运用中对于用户名和密码等可以看见的value值我们这样操作就会使用户的体验不是很好，如上图，在输入用户名的文本框中，会出现"请输入用户名"的文本，用户还得自己删掉,所以我们现在使用更多的是placehol
修改input中placeholder样式
weixin_44646763的博客
07-20 2万+
实现方法： 使用::placeholder”选择器 ::placeholder是css3新增的选择器,可能存在一定的浏览器兼容问题，所以最好加上不同的前缀 -ms- 、 -webkit- 、-ms- 等 input::placeholder { font-weight: 400; color: #624b2f; } //::-webkit-input-placeholder/* WebKit, Blink, Edge */ //:-moz-placeholder/* Mozilla Fir
ie8浏览器下，input框中的文字显示的位置不居中，解决方法
whx_0408的专栏
11-13 4982
题目描述的现象如下 input框的位置为蓝色区域 但是在IE8中显示光标的位置 明显偏上， 解决该问题的方法是去掉关于html文档类型的声明 去掉我 去掉后显示的效果 可以正常居中显示 这个修正主要适用于需要input框后面有背景等。 目前不知道为什么这么修改可以解决这个问题，如果有哪位大神了解机制，请多多指教哈。
input框的placeholder使用line-height在Safari上不垂直居中的问题
夏天的甲虫
07-29 1万+
测试中出现的问题，Safari5.1.7  input文本框有placeholder值时，css样式设置 line-heigh t与 heigh t等高，并不能使提示文本垂直居中，如下： width: 450px; height: 40px; line-height: 40px;解决方案一：使用padding使提示文字居中，
解决移动端input中placeholder无法垂直居中的问题
web_callBack的博客
12-27 9484
在项目中遇到在移动端中placeholder属性无法实现垂直居中的问题，解决方案如下： 问题原因：input的placeholder属性由于对于各个浏览器的兼容性不同，在ios浏览器文字靠上，而在andrio浏览器中却文字靠下 解决办法：可以使用span标签代替placeholder属性，结合js的方法模拟实现 代码如下： HTML代码： 咨询服务员后
如何让textarea placeholder 文字垂直居中
08-16 2268
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> 　　#textArea { 　　　　color: white; 　　　　height: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值