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

news/2024/7/20 2:19:20 标签: 小程序

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不垂直居中的问题


http://www.niftyadmin.cn/n/4972089.html

相关文章

elementuiplus设置scroll-to-error之后 提示被遮挡的解决方案

项目场景&#xff1a; 普通的头部固定&#xff0c;中间滑动的布局&#xff0c;中间内容有表单&#xff0c;提交校验不通过时滚动到第一个错误项 问题描述 elementuiplus的scroll-to-error设置之后是局部滚动 当头部内容层级高于中间表单的时候&#xff0c;错误会被遮挡。 ---…

保研之旅3:国防科技大学电子科学学院夏令营

本文记录了我参与国防科技大学电子科学学院推免面试的全过程。国防科大电子科学学院的夏令营分两期进行&#xff0c;第一期是7.117.15号&#xff0c;第二期是8.218.25号。两期的活动和面试安排都差不多。 时间安排&#xff1a; 8.21 :下午报道&#xff0c;住的是长沙的维也纳酒…

一文看懂Cat.1、Cat.4、NB-IOT、4G之间的区别

01 什么是Cat.1&#xff1f; Cat.1的全称是LTEUE-Category1&#xff0c;其中UE指的是用户设备&#xff0c;它是LTE网络下用户终端设备的无线性能的分类。根据3GPP的定义&#xff0c;UE类别以1-15分为15个等级。Cat.1&#xff0c;可以称为“低配版”的 4G 终端&#xff0c;上行…

Gradle 如何配置全局 mavenCentral()

我们都知道 Gradle 会使用 Maven 的中央仓库。 在 Gradle 的配置文件中&#xff0c;通常有一个 mavenCentral() 如果我们想把 mavenCentral() 的仓库地址全局替换掉别的仓库地址的话。 我们可以在 C:\Users\yhu\.gradle 目录下创建一个 init.gradle 文件。 文件中的代码为&a…

算法训练第四十六天

139. 单词拆分 - 力扣&#xff08;LeetCode&#xff09; 总结&#xff1a;自己一开始想的利用回溯来解决但是也考虑到可能会超时&#xff0c;从动归角度入手&#xff0c;自己没有弄清楚dp数组的含义而导致没有正确解决问题&#xff0c;此题的dp数组是当字符串的子串长度为i时&…

[前端系列第7弹]Vue:一个渐进式的 JavaScript 框架

Vue 是一个用于构建用户界面的 JavaScript 框架&#xff0c;它具有以下特点&#xff1a; 渐进式&#xff1a;Vue 可以根据不同的使用场景&#xff0c;灵活地选择使用库或者框架的方式&#xff0c;从而实现渐进式的开发。响应式&#xff1a;Vue 通过数据绑定和虚拟 DOM 技术&am…

文本编辑器Vim常用操作和技巧

文章目录 1. Vim常用操作1.1 Vim简介1.2 Vim工作模式1.3 插入命令1.4 定位命令1.5 删除命令1.6 复制和剪切命令1.7 替换和取消命令1.8 搜索和搜索替换命令1.9 保存和退出命令 2. Vim使用技巧 1. Vim常用操作 1.1 Vim简介 Vim是一个功能强大的全屏幕文本编辑器&#xff0c;是L…

Linux线程 --- 生产者消费者模型(C语言)

在学习完线程相关的概念之后&#xff0c;本节来认识一下Linux多线程相关的一个重要模型----“ 生产者消费者模型” 本文参考&#xff1a; Linux多线程生产者与消费者_红娃子的博客-CSDN博客 Linux多线程——生产者消费者模型_linux多线程生产者与消费者_两片空白的博客-CSDN博客…