当placeholder的字体大小跟input大小不一致,placeholder垂直居中
当placeholder的字体大小跟input大小不一致,实现placeholder垂直居中
设计稿的placeholder的样式是这样的

输入值的时候大小是这样的

最后想要实现的效果是这样的

当我这样写的时候
input::-webkit-input-placeholder{
color: #D9D9D9;
font-size: 36px;
}
效果是这样的,会稍微偏低一点

后面我加了一个translate,就可以实现垂直居中
input::-webkit-input-placeholder{
color: #D9D9D9;
font-size: 36px;
transform: translate(0, -10px);
}

当placeholder的字体大小跟input大小不一致,placeholder垂直居中的更多相关文章
- 当placeholder的字体大小跟input大小不一致时,实现placeholder垂直居中
如图:搜索和图标不是垂直居中着实难受 最终通过如下代码实现: input::-webkit-input-placeholder { transform: translate(0, 2px); }
- 四、Input框改placeholder中字体的颜色
Input框改placeholder中字体的颜色 input::-webkit-input-placeholder { color: #ccc; font-size: 12px; }
- css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色
壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...
- 设置input中placeholder的样式(placeholder设置字体)
方法: 代码示例: .input::-webkit-input-placeholder { font-size: 3.73333333vw; color: #cccccc; } .input:-moz ...
- CSS如何设置字体的类型、大小、颜色
设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. < ...
- 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体
一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...
- javacpp-opencv图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体、位置、大小、粗度、翻转、平滑等操作
欢迎大家积极开心的加入讨论群 群号:371249677 (点击这里进群) javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置. ...
- Html5 input placeholder 属性字体颜色修改。
这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下 Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...
- css总结4:input 去掉外边框,placeholder的字体颜色、字号
1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...
随机推荐
- 【二代示波器教程】第15章 FreeRTOS操作系统版本二代示波器实现
第15章 FreeRTOS操作系统版本二代示波器实现 本章教程为大家讲解FreeRTOS操作系统版本的二代示波器实现.主要讲解RTOS设计框架,即各个任务实现的功能,任务间的通信方案选择,任务 ...
- 【计算机篇】目前最好用的 PPT 神器 — iSlide! 一键完成 PPT 设计!
谈到工作中的难题,PPT 这个不起眼的软件,绝对算一个.不同于 Word.Excel,PPT 既要传递信息,还要讲求设计.这很容易使大部分人感觉素材不够,设计不专业或者效率不高.以往为了解决 PPT ...
- numpy.random 常用函数详解之排列乱序篇(Permutations)
1.numpy.random.shuffle(x) 参数:填入数组或列表. 返回值:无. 函数功能描述:对填入的数组或列表进行乱序处理,shape保持不变. 2.numpy.random.permut ...
- [Swift]LeetCode984. 不含 AAA 或 BBB 的字符串 | String Without AAA or BBB
Given two integers A and B, return any string S such that: S has length A + B and contains exactly A ...
- IDEA 配置远程debug
1. 启动远程服务配置debug参数 远程服务启动时配置如下debug相关参数 java -Xdebug -Xrunjdwp:server=y,transport=dt_socket,address= ...
- IO复用(较详细)
进程与线程的描述 一个进程至少会创建一个线程,多个线程共享一个程序进程的内存.程序的运行最终是靠线程来完成操作的.线程的数量跟CPU核数有关,一个核最多能发出两个线程.线程的操作主要分为:一:给CPU ...
- jQuery Mobile中表单的使用体会
jQuery Mobile是手机端(移动端)页面制作用的框架,包括CSS和JavaScript,此处简单总结一下表单的书写,主要涉及CSS部分.框架提供了表单的一些样式,但在实际使用的时候,我们可能会 ...
- cassandra vs mongo (1)存储引擎
摘要 在MongoDB 初识篇中谈到过Mongo 与 Cassandra的区别,这边再谈谈Mongo与Cassandra的存储引擎差别 概括 存储引擎: 类型 功能 应用 hash 增删改.随机读.顺 ...
- JVM基础系列第14讲:JVM参数之GC日志配置
说到 Java 虚拟机,不得不提的就是 Java 虚拟机的 GC(Garbage Collection)日志.而对于 GC 日志,我们不仅要学会看懂,而且要学会如何设置对应的 GC 日志参数.今天就让 ...
- Guava 源码分析(Cache 原理)
前言 Google 出的 Guava 是 Java 核心增强的库,应用非常广泛. 我平时用的也挺频繁,这次就借助日常使用的 Cache 组件来看看 Google 大牛们是如何设计的. 缓存 本次主要讨 ...