小程序input的placeholder不垂直居中的问题解决

这篇具有很好参考价值的文章主要介绍了小程序input的placeholder不垂直居中的问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

input的placeholder不垂直居中,input设置高度后,使用line-height只能使输入的文字垂直居中,但是placeholder不会居中,反而会偏上。

  1. 首先placeholder样式自定义

有两种方法,第一种行内样式:

<input type="text" placeholder="姓名" placeholder-style="font-size:28rpx;color:#999999;" />

第二种加类名:
给input加上placeholder-class属性,然后给该属性 设置一个类名,在style中设置样式。

<input  type="text"  placeholder="地址" placeholder-class="address"/>
 <style>
 	.address{
		color: red;
	}
 </style>

placeholder的字体颜色都能改变,但是仍然不会在input框里垂直居中,一直偏上,查了很多方法都不管用,比如:

小程序input的placeholder不垂直居中的问题解决,小程序

比如:

小程序input的placeholder不垂直居中的问题解决,小程序
能垂直居中是能,但是input框变得没有内边距了,很不好看。

  1. 最后找到解决办法了:

在placeholder上增加pandding-top,把提示文字顶下来

参考:IOS下input的placeholder不垂直居中的问题
文章来源地址https://www.toymoban.com/news/detail-675147.html

到了这里,关于小程序input的placeholder不垂直居中的问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序input的placeholder脱离文档流

    今天进行真机调试时input的提示词 placeholder脱离了文档流,但是奇怪的是input框没有脱离文档流 如下图所示: 微信开发工具正常:                                 真机: 不正常 脱离文档流               解决方法:  css 加上定位  效果: 这里记录一下  

    2024年02月16日
    浏览(51)
  • 小程序中修改input的placeholder字体颜色样式

    3. wxss 示例

    2024年03月25日
    浏览(45)
  • 微信小程序设置input框placeholder的字体大小

    给input框绑定 placeholder-class=\\\"placeholder-style\\\"这个属性。 绑定属性    设置样式  

    2024年02月16日
    浏览(48)
  • 微信小程序布局图片上面显示文字以及文字水平垂直居中

     博主介绍: 本人专注于Android/java/数据库/微信小程序技术领域的开发,以及有好几年的计算机毕业设计方面的实战开发经验和技术积累;尤其是在安卓(Android)的app的开发和微信小程序的开发,很是熟悉和了解;本人也是多年的Android开发人员;希望我发布的此篇文件可以帮

    2024年02月14日
    浏览(48)
  • el-icon不垂直居中,与文字不对齐的解决策略

    我们在使用el-cion的时候,渲染出来之后它是一个i包裹着一个svg的,默认不会垂直居中,就会与文字形成偏移   居中的策略: 1、将外层div设置为display:flex,设置垂直居中 2、将el-icon设置一个size,大概和文字一样大即可 最终实现的效果:成功垂直居中,与文字对齐

    2024年02月12日
    浏览(118)
  • 【微信小程序】解决text标签文字不居中问题

    我在text标签上的view父标签中写了smbox样式,也就是说text标签会继承text-align这个属性 但是Python啊Django啊三个字以上的文字要不就是超出格子,要不就掉到下一行了。怎么看都不舒服。 在text标签中添加 margin:-150rpx 就能将以上的文字调整到中间 上面在text标签中写了text-align也试

    2024年02月11日
    浏览(65)
  • 【小程序】input输入框属性及上下左右居中的示例(图文+代码)

    属性 功能 示例 placeholder 输入框空时,提示文字  placeholder=“请输入用户名” placeholder-style 输入框,提示文字的样式 placeholder-style= \\\"color:rgb(170,170,170); margin-left: 20px;\\\" placeholder-class placeholder 的样式类 用class样式修改 cursor-spacing 指定的光标与弹出键盘的距离 cursor-spacing=\\\"50\\\" t

    2024年02月15日
    浏览(44)
  • CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法

    水平居中效果图 水平居中 全局样式 第一种:margin+width 这种方法适用于已经知道width的盒子,实现起来比较简单 第二种:text-align+inline-block 这种方法适用于多种场景(width不固定) 第三种:float+position 这种方法适用于多种场景(width不固定) 第四种: 这种方法适用于多种场

    2024年02月09日
    浏览(64)
  • 居中一个元素(水平+垂直居中)

    我们的示例代码全在此基础上修改: 具体原理参考下面这篇博客: flex 弹性布局_本郡主是喵的博客-CSDN博客 对于内容是 行内式元素(内容大小撑起标签宽高)或文字, 是有效的。 line-heignt == height ,能使文字垂直对齐,text-align:center,能使内容居中水平对齐 父元素,采用相对布局,

    2024年02月11日
    浏览(50)
  • 水平居中、垂直居中的几种方法

    ① 若是针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素 父元素设置  text-align:center; 或者用绝对定位、弹性布局、grid网格布局实现; ② 不定宽块状元素 设置  margin:0 auto; 或者用绝对定位、弹性布局、grid网格布局、table表布局实现; grid网格布

    2023年04月19日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包