iis服务器助手广告广告
返回顶部
首页 > 资讯 > 操作系统 >小程序input的placeholder不垂直居中的问题解决
  • 871
分享到

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

小程序 2023-08-30 15:08:17 871人浏览 薄情痞子
摘要

input的placeholder不垂直居中,input设置高度后,使用line-height只能使输入的文字垂直居中,但是placeholder不会居中,反而会偏上。 首先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框变得没有内边距了,很不好看。

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

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

参考:iOS下input的placeholder不垂直居中的问题

来源地址:https://blog.csdn.net/qq_43437571/article/details/132511830

--结束END--

本文标题: 小程序input的placeholder不垂直居中的问题解决

本文链接: https://www.lsjlt.com/news/383112.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 小程序input的placeholder不垂直居中的问题解决
    input的placeholder不垂直居中,input设置高度后,使用line-height只能使输入的文字垂直居中,但是placeholder不会居中,反而会偏上。 首先placeholder样式自定义 有两种方法,第一种行内样式: ...
    99+
    2023-08-30
    小程序
  • 如何解决CSS垂直水平居中的问题
    这篇文章主要介绍了如何解决CSS垂直水平居中的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。CSS 居中对齐代码中均省略了浏览器前缀以下...
    99+
    2024-04-02
  • 如何解决CSS的水平垂直居中的问题
    这篇文章主要为大家展示了“如何解决CSS的水平垂直居中的问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决CSS的水平垂直居中的问题”这篇文章吧。创建元...
    99+
    2024-04-02
  • 如何解决HTML5中垂直上下居中的问题
    小编给大家分享一下如何解决HTML5中垂直上下居中的问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!在CSS中,则要吐槽一下,利用margin:0 auto;可以达到水平方向的居中,但是...
    99+
    2024-04-02
  • CSS怎么解决页面图片水平垂直居中问题
    这篇文章主要介绍“CSS怎么解决页面图片水平垂直居中问题”,在日常操作中,相信很多人在CSS怎么解决页面图片水平垂直居中问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CS...
    99+
    2024-04-02
  • 如何解析网页文字在DIV+CSS布局中垂直居中的问题
    这期内容当中小编将会给大家带来有关如何解析网页文字在DIV+CSS布局中垂直居中的问题,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。网页文字在DIV+CSS布局中垂直居中...
    99+
    2024-04-02
  • 微信小程序input、textarea层级过高穿透的问题解决
      微信小程序原生组件camera、canvas、input(仅在focus时表现为原生组件)、live-player、live、pusher、map、textarea、video的...
    99+
    2024-04-02
  • 如何解决layer.msg不居中在ifram中的问题
    这篇文章给大家分享的是有关如何解决layer.msg不居中在ifram中的问题的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在ifram中layer.alert 只展示当前页面如...
    99+
    2024-04-02
  • 如何解决css中line-height=height元素高度但是文字并没有垂直居中的问题
    这篇文章将为大家详细讲解有关如何解决css中line-height=height元素高度但是文字并没有垂直居中的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。先说下为什么line-height等于元素...
    99+
    2023-06-08
  • html中如何解决图片与文字垂直方向不对齐问题
    这篇文章主要介绍html中如何解决图片与文字垂直方向不对齐问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!比如说,现在我要做一个简单的删除按钮,只由一个icon和“删除”两个字组成...
    99+
    2024-04-02
  • 解决uni小程序在IOS端input框被软键盘‘挤上去’的问题
    事先声明!本人前端小白一枚,偶然遇到在ios端input框被遮挡的问题,十分苦恼,也尝试了很多解决办法但都不是很有效,最后在一位大牛的帮助下得到解决,想记录一下分享一下,如果你也遇到可以尝试一样看看! 先复现问题! 我这里是产生问题的环...
    99+
    2023-10-10
    小程序
  • Bootstrap列的垂直间距遇到堆叠问题如何解决
    这篇文章主要介绍“Bootstrap列的垂直间距遇到堆叠问题如何解决”,在日常操作中,相信很多人在Bootstrap列的垂直间距遇到堆叠问题如何解决问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2024-04-02
  • 解决WCF不能直接序列化SqlParameter类型的问题
    错误描述: 由于内部错误,服务器无法处理该请求。有关该错误的详细信息,请打开服务器上的 IncludeExceptionDetailInFaults (从 ServiceBehavi...
    99+
    2024-04-02
  • 如何解决小程序开发中遇到的问题
    这篇文章主要介绍了如何解决小程序开发中遇到的问题,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。小程序面试题1. bindtap和catchtap的区别是什么?bind事件绑定...
    99+
    2023-06-14
  • 怎么解决img在div中居中的问题
    这篇文章主要讲解了“怎么解决img在div中居中的问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么解决img在div中居中的问题”吧!Img是内联元素...
    99+
    2024-04-02
  • 如何解决微信小程序中scroll-view不能左右滑动的问题
    这篇文章将为大家详细讲解有关如何解决微信小程序中scroll-view不能左右滑动的问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。问题:    在小程序页面布局的时候用到...
    99+
    2023-06-20
  • vue中的input框点击后不聚焦问题怎么解决
    今天小编给大家分享一下vue中的input框点击后不聚焦问题怎么解决的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。input...
    99+
    2023-06-30
  • maveninstall报错中程序包xxx不存在的问题解决
    目录问题解决1、依赖未声明或者未下载成功2、引用的是本地模块,但是未打包到本地maven仓库3、父子项目包名不一致注意事项4、maven仓库路径不对5、重启idea6、清空targe...
    99+
    2024-04-02
  • uniapp小程序解决不能上传文件/图片问题
    uniapp小程序解决不能上传文件/图片问题 当前uniapp微信小程序无法使用formData( )来上传文件/图片,会出现FormData is not defined 问题, 而官方给的un...
    99+
    2023-10-01
    小程序 uni-app 微信小程序 javascript vue
  • BootStrap如何实现响应式导航栏垂直平分和下拉列表的居中问题
    这篇文章将为大家详细讲解有关BootStrap如何实现响应式导航栏垂直平分和下拉列表的居中问题,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在查看psd图的效果是导航栏的...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作