最近在开发项目时发现,在移动端input里面的placeholder字体偏下,但PC端却是垂直居中,而两者的代码几乎相同,只是字体大小有差异,查询发现原来就是它惹的祸。 原因: 输入的文字font-size大于placeholder的font-size。 当时我的代码中PC端与移动端的font-size均为默认值:16px,而PC端的placeholder的font-size为18px,移...
input:-moz-placeholder { /* Mozilla Firefox 4 to 18*/ color:#999;font-size:14px; } input::-moz-placeholder { /* Mozilla Firefox 19+*/ color:#999;font-size:14px; } input:-ms-input-placeholder { /* Internet Explorer 10+*/ color:#999;font-size:14px; } 1. 2. 3. 4. 5. 6...
垂直居中的话把line-height设置为normal，水平居中 <style type="text/css"> input::-ms-input-placeholder{text-align: center;} input::-webkit-input-placeholder{text-align: center;} </style>
iphone7 下 placeholder 字体变成12px 移动端下,placeholder 不垂直居中 解决方案: input::-webkit-input-placeholder{ font-size: 14px ; //解决iphone下字体大小为12的问题(和input大小不一致) line-height: 1em; //解决不垂直居中的问题 } 最后编辑于 :2017.12.06 03:40:49 ©著作权归作者所有,转载或...
html <div class="parent-grid"> <input type="text" placeholder="使用Grid居中"> </div> 使用绝对定位和转换 如果你不能使用Flexbox或Grid,还可以通过绝对定位和transform来实现居中。 代码示例: css .parent-absolute { position: relative; height: 100px; } .input-absolute { ...
1.问题描述 问题如图:手机端placeholder文字偏上,垂直方向不居中,input光标显示偏上 2.解决方案 css {代码...} html {代码...} 3.成果 问题完美解决,plac...
这次首页改版UI的设计图中输入框的提示文字要求是居中的,现在把改动的方法记录如下,以备不时之需~ ::-webkit-input-placeholder{/* WebKit, Blink, Edge */color:#333;font-size:12px;text-align:center;}:-moz-placeholder{/* Mozilla Firefox 4-18 */color:#333;font-size:12px;text-align:center;}:...
css系列:input的placeholder在safari下设置行高失效 技术交流群:821039247 在项目中遇到input的placeholder在safari下设置行高失效的问题,问度娘后未得治原因,倒是有解决办法: 方法一:使用padding使提示文字居中,如果font-size:14px,UI高度为40px,我们可以设height:14px,padding:13px 0;...
这个可以叫代码换行被解析,在这个顶部盒子box上设置font-size:0可以直接让里面的文本内容消失,这样两个input就会在一行上显示了。如果不设置,文本内容也就是这个⇄会占位置的,默认情况下Chrome的中文是12px。还有一点就是,你的代码里面这块: <input type="text" id='general' name="1" placeholder='请输入' ...
移动端placeholder不能垂直居中解决方案 1.问题描述 问题如图:手机端placeholder文字偏上,垂直方向不居中,input光标显示偏上 2.解决方案 css .phoneNumber input { width: 100%; font-size: .34rem; display: inline-block; -moz-box-sizing: border-box;...