当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 ...
随机推荐
- 微信小程序开发-窗体设置
"window": { "backgroundTextStyle": "light", "navigationBarBackgro ...
- NumPy库
NumPy详细教程(官网手册翻译) Python之Numpy详细教程 一.基础篇 1.NumPy - Ndarray 对象 ndarray描述相同类型的元素集合, 可以使用基于零的索引访问集合中的项目 ...
- 如何让浏览器支持ES6语法,步骤详细到小学生都能看懂!
为什么ES6会有兼容性问题? 由于广大用户使用的浏览器版本在发布的时候也许早于ES6的定稿和发布,而到了今天,我们在编程中如果使用了ES6的新特性,浏览器若没有更新版本,或者新版本中没有对ES6的特性 ...
- 1 小时 SQL 极速入门(一)
前几天,我在论坛溜达.看到一个人发帖说 做了6年的企业级开发,总是被互联网行业的人认为没技术含量,不就是CRUD么 先解释下 CRUD 是什么.CRUD 就是我们常说的增删改查(Create,Retr ...
- Javascript高级编程学习笔记(84)—— Canvas(1)基本用法
Canvas绘图 Canvas自HTML5引入后,由于其炫酷的效果成为HTML5新增功能中最受欢迎的部分 Canvas元素通过在页面中设定一个区域,然后就可以使用JS在其中绘制图形 <canva ...
- [Swift]LeetCode528. 按权重随机选择 | Random Pick with Weight
Given an array w of positive integers, where w[i] describes the weight of index i, write a function ...
- Linux下RabbitMQ服务器搭建
系统环境 操作系统:CentOS6.9 erlang:OTP 19.3 rabbitmq:rabbitmq-server 3.6.12 安装步骤 安装erlang 1,安装预环境 通过yum安装以下组 ...
- 设计模式的征途—4.抽象工厂(Abstract Factory)模式
上一篇的工厂方法模式引入了工厂等级结构,解决了在原来简单工厂模式中工厂类职责太重的原则,但是由于工厂方法模式的每个工厂只生产一类产品,可能会导致系统中存在大量的工厂类,从而增加系统开销.那么,我们应该 ...
- ADO.NET中COMMAND对象的ExecuteNonQuery、ExcuteReader和ExecuteScalar方法
1.ExecuteNonQuery方法.该方法执行更新操作,即与UPDATE.INSERT.DELETE等语句有关的操作,在这种情况下,返回值是命令影响的行数.对其他语句,如SET或CREATE,则返 ...
- C#3.0智能的编译器
智能的编译器 在C#3.0中,编译器变的越来越智能,我们不用提供给它完整的信息,仅需要提供必要的信息,编译器就可以进行推断为我们补全未提供的信息 自动实现的属性 在之前我们生成一个类时需要有一个字段, ...