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

最新推荐文章于 2023-09-14 21:58:10 发布
最新推荐文章于 2023-09-14 21:58:10 发布
阅读量2.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/chaojie2009/article/details/9043003 
line-height: normal; /* for non-ie */  
line-height: 22px\9; /* for ie */

uniapp-扩展小常识
优快云博客专家，系统架构师，有合作、疑惑请私信博主。
01-01 1694
uniapp-扩展小常识，Uniapp是一个使用Vue.js开发所有前端应用的框架，开发者可以使用Vue.js的语法和开发体验，编写一套代码，同时将其编译为多个平台的应用，包括iOS、Android、H5、微信小程序、支付宝小程序、百度小程序、头条小程序等。这种跨平台开发的能力极大地节省了开发成本和时间，提高了开发效率，为开发者带来了诸多便利。
placeholder垂直居中（解决光标居中、文字不居中问题）
半个橙子的博客
05-04 1万+
placeholder垂直居中 解决只有光标居中，文字不居中问题。
解决input的placeholder不垂直居中问题
qq_38136543的博客
09-09 4812
解决input的placeholder不垂直居中 将input的line-height改为normal line-height:normal
chrome placeholder导致输入光标不居中
咸鱼的星空
11-05 2007
但是在chrome下显示的search word并不能垂直居中。 后来找了很久终于在stackoverflow上找到了对应的方法。 参考：http://stackoverflow.com/questions/4919680/html5-placeholder-css-padding 就是一句：把line-height设置为normal line-he
浏览器原生placeholder样式修改
weixin_33910434的博客
04-29 349
浏览器（chrome）原生placeholder样式：修改如下：input::placeholder { color: red; font-weight: bold; font-size: 22px; }复制代码浏览器兼容性写法忽略，不要把有限的生命浪费在浏览器兼容上:)...
关于布局中垂直居中，踩过的坑（解决了，但是还是稀里糊涂的）
weixin_40098371的博客
04-19 381
昨天拿了一个页面练手，刚写了三行，碰见一垂直居中问题。没有问题的代码截图如下：html:css:html,body,div,ul,li,span,img,input{ padding: 0; margin: 0; font-size: 72px;     box-sizing:border-box; } div{ display: inline-block; } #wrapper{    ...
input 的 placeholder 样式
huangpb的博客
09-14 3132
这个伪元素可以改变 input、textarea 占位文本的样式。
IE8下input光标位置垂直不居中问题
BigOrange的博客
10-20 2728
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）。...
el-input placeholder样式
01-16
如果遇到 placeholder 文本未能正确垂直居中的情况，则可能是因为 `.el-input__inner` 中存在影响布局属性所导致的问题。此时可通过调整该元素内部行高(`line-height`) 属性解决此问题: ```css /deep/ .el-input__...
<div class="col-12"> <p:inputText value="#{issueBean.view.eamQrCode}" placeholder="Please scan the QR code" onkeydown="return true"> <p:ajax event="change" listener="#{issueBean.changeNo}" oncomplete="PF('scanEamAssetDialog').hide();"/> </p:inputText> </div> 关闭扫描页面位置移动
最新发布
04-03
用户提到了PrimeFaces的inputText组件的ajax change事件、页面滚动问题以及QR扫描对话框关闭后位置移动的情况。我需要先理解用户的问题背景，然后分析可能的原因，最后给出解决方案。 首先，用户可能在页面中使用...
chrome调试技巧
EmotionComputer
10-04 7089
打开 Chrome 开发者工具 在 Chrome 菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击，选择 “检查” 使用 快捷键 F12或Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac) 了解面板 元素面板 控制台面板 源代码面板 网络面板 性能面板 内存面板 应用面板 安全面板 1. 元素面板 使用元素面板可以自由的操作 DOM 和 CSS 来迭代布局和设计页面。 检查和调整页面 编辑样式 编辑 DOM 2.控制台面板 在开发期
Chrome下面查看placeholder的样式
weixin_30657999的博客
08-24 3548
在Chrome下面默认是看不到placeholder的样式的 我们可以通过在当前页面的开发者工具里面的settings 勾选下面这个选项，就可以看到了 下面是效果 转载于:https://www.cnblogs.com/ppxyq/p/9530527.html...
【css】input文本框光标垂直不居中
夕雨林流金,web全栈,web全端,网站技术博客
04-13 2124
设置样式：line-height:32px\9; 有人说safari不兼容加这个： @media screen and (-webkit-min-device-pixel-ratio:0){ input{ line-height:50%; } } 来源：http://tinycss.blog.163.com/blog/static/200020315201262093239625/
css3 placeholder中含有文字和字符，字符如何在input中垂直居中
wanglufei_1992的博客
05-13 2026
有这个一个小功能 星号垂直居中。这是最后要呈现的效果。">``` 如果只是单纯让这样写，它会是这样的效果： ![这里写图片描述](http://img.blog.youkuaiyun.com/20160513102416971) 这时候只需要加上 font-family: sans-serif; “` 然后，就可以了。
input 标签placeholder文字居中
热门推荐
xqq580231的博客
12-27 2万+
input::-ms-input-placeholder{ text-align: center; } input::-webkit-input-placeholder{ text-align: center; }
chrome input 光标垂直居中问题
ISaiSai的专栏
12-23 6032
chrome 下设置较高的input 的时候，光标不会居中（即使设置了相同的height 和line-height） 解决方法：部分高度使用 相同   padding-top 和padding-bottom 代替                     .heightTest {             padding: 10px 0px;
解决移动端input中placeholder无法垂直居中的问题
web_callBack的博客
12-27 9479
在项目中遇到在移动端中placeholder属性无法实现垂直居中的问题，解决方案如下： 问题原因：input的placeholder属性由于对于各个浏览器的兼容性不同，在ios浏览器文字靠上，而在andrio浏览器中却文字靠下 解决办法：可以使用span标签代替placeholder属性，结合js的方法模拟实现 代码如下： HTML代码： 咨询服务员后
Safari浏览器中input 光标lineheight失效 不居中
weixin_38026561的博客
05-07 1472
Safari中bug，line-height 属性和高度相等，不能使input输入框中的光标垂直居中height = padding + font-size;  这样通过padding方式达到的居中效果没有问题。如果高度是30px，字体大小是16px，设置line-height和字体大小相同，计算得上下内边距是7px。 #willlearn-search { padding:17px...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

chaojie2009

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值