当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垂直居中的更多相关文章

  1. 当placeholder的字体大小跟input大小不一致时,实现placeholder垂直居中

    如图:搜索和图标不是垂直居中着实难受 最终通过如下代码实现: input::-webkit-input-placeholder { transform: translate(0, 2px); }

  2. 四、Input框改placeholder中字体的颜色

    Input框改placeholder中字体的颜色 input::-webkit-input-placeholder { color: #ccc; font-size: 12px; }

  3. css 修改placeholder字体颜色字体大小 修改input记住账号密码后的默认背景色

     壹 ❀ 引 本来这个阶段的项目页面都是给实习生妹子做的,我只用写写功能接接数据,但这两天妹子要忙翻译,这个工作阶段也快结束了导致有点慌,只能自己把剩余的几个小页面给写了. 那么做页面的过程中,UI也 ...

  4. 设置input中placeholder的样式(placeholder设置字体)

    方法: 代码示例: .input::-webkit-input-placeholder { font-size: 3.73333333vw; color: #cccccc; } .input:-moz ...

  5. CSS如何设置字体的类型、大小、颜色

    设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置. < ...

  6. 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

    一.CSS如何设置字体的类型.大小.颜色 设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体 ...

  7. javacpp-opencv图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体、位置、大小、粗度、翻转、平滑等操作

    欢迎大家积极开心的加入讨论群 群号:371249677 (点击这里进群) javaCV图像处理系列: javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置. ...

  8. Html5 input placeholder 属性字体颜色修改。

    这篇文章主要介绍了有关HTML5 input placeholder 颜色修改方面的知识,需要的朋友可以参考下     Chrome支持input=[type=text]占位文本属性,但下列CSS样式 ...

  9. css总结4:input 去掉外边框,placeholder的字体颜色、字号

    1 input 标签去除外边框: 在进行webAPP开发时,input外边框非常影响美观,去除外边框方法如下: <input style="border: 0px;outline:no ...

随机推荐

  1. 已知一个字符串S 以及长度为n的字符数组a,编写一个函数,统计a中每个字符在字符串中的出现次数

    import java.util.Scanner; /** * @author:(LiberHome) * @date:Created in 2019/3/6 21:04 * @description ...

  2. RabbitMQ CLI 管理工具 rabbitmqadmin(管理和监控)

    插个广告,公司最近在招".NET"开发(杭州),如果你现在还从事 .NET 开发(想用 .NET Core,但被公司不认可),想转 JAVA 开发(但又没有工作经验,惧怕面试),想 ...

  3. Puppeteer: 更友好的 Headless Chrome Node API

    很早很早之前,前端就有了对 headless 浏览器的需求,最多的应用场景有两个 UI 自动化测试:摆脱手工浏览点击页面确认功能模式 爬虫:解决页面内容异步加载等问题 也就有了很多杰出的实现,前端经常 ...

  4. 使用Sublime Text 或 vs2017开发Node.js程序

    在学习一门开发语言时,为了从简单的方式入手,有时候直接用Notepad开始敲代码.曾经我也这样干过,这样做简洁而不简单啊! 随着时间的流逝,人也变得懒惰起来,做事前总是想借助一些工具来搞事情.< ...

  5. JDBC也就那么回事

    JDBC 一.JDBC概述 为什么要使用JDBC? JDBC:Java DataBase Connectivity,是SUN公司提供的一套操作数据库的标准规范(技术). JDBC与数据库驱动的关系:接 ...

  6. Unable to preventDefault inside passive event listener due to target being treated as passive

    Unable to preventDefault inside passive event listener due to target being treated as passive 今天在做项目 ...

  7. Python 实现获取微信好友信息

    最近用闲余时间看了点python,在网上冲浪时发现有不少获取微信好友信息的博客,对此比较感兴趣,于是自己敲了敲顺便记录下来. 一.使用 wxpy 模块库获取好友男比例信息和城市分布. # -*- co ...

  8. Javascript reduce方法

    reduce方法接收一个函数作为累加器,数组中的每个值(从左至右)开始缩减,最终计算为一个值 注意:reduce()对于空数组是不会执行回调函数 语法: array.reduce(function(t ...

  9. 华为oj之字符串分割

    题目: 字符串分隔 热度指数:6139 时间限制:1秒 空间限制:32768K 本题知识点: 字符串 题目描述 •连续输入字符串,请按长度为8拆分每个字符串后输出到新的字符串数组: •连续输入字符串, ...

  10. Android模拟器Genymotion使用详解

    介绍 Genymotion是一款出色的跨平台的Android模拟器,具有容易安装和使用.运行速度快的特点,是Android开发.测试等相关人员的必备工具. 官网地址:https://www.genym ...