当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 ...
随机推荐
- 将本地jar包打包到本地仓库和上传到私服
1.本地jar打包到本地仓库 mvn install:install-file -Dfile=jar包完整地址或相对地址 -DgroupId=自定义的groupID -DartifactId=自定义的 ...
- Dora.Interception,为.NET Core度身打造的AOP框架 [4]:与依赖注入框架的无缝集成
Dora.Interception最初的定位就是专门针对.NET Core的AOP框架,所以在整个迭代过程中我大部分是在做减法.对于.NET Core程序开发来说,依赖注入已经成为无处不在并且“深入骨 ...
- JS实现数组去重方法大总结
js数组根据对象中的元素去重: var arr2 = [ { name: "name1", num: "1" }, { name: "name2&qu ...
- Java Web每天学之Servlet的原理解析
Java Web每天学之Servlet的工作原理解析,上海尚学堂Java技术文章Java Web系列之二上一篇文章Java Web每天学之Servlet的工作原理解析是之一,欢迎点击阅读. Servl ...
- LeetCode题解41.First Missing Positive
41. First Missing Positive Given an unsorted integer array, find the first missing positive integer. ...
- [Swift]LeetCode424. 替换后的最长重复字符 | Longest Repeating Character Replacement
Given a string that consists of only uppercase English letters, you can replace any letter in the st ...
- [Swift]LeetCode756. 金字塔转换矩阵 | Pyramid Transition Matrix
We are stacking blocks to form a pyramid. Each block has a color which is a one letter string, like ...
- Node.js 多版本安装
Node.js 多版本安装 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine(Node.js 是一个基于 ...
- python学习笔记(十)、文件操作
在前面我们了解到了没得模块,其中有一个模块为fileinput,为文件操作模块,不知道小伙伴们是否还记得? 1 打开文件 要打开文件,可以使用fileinput中的fileinput.input函数进 ...
- 【Storm篇】--Storm分组策略
一.前述 Storm由数源泉spout到bolt时,可以选择分组策略,实现对spout发出的数据的分发.对多个并行度的时候有用. 二.具体原理 1. Shuffle Grouping 随机分组,随机派 ...