当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. 对象池----unity中应用

    对象池应用在unity中能减少资源消耗,节省内存空间具体原理不再赘述. 以下是他的操作步骤:(注意:对象池中应用到了栈或对队列!) 1).先建立一个(怪物)物体   mMonster; 2).再建立一 ...

  2. Mesos源码分析(1): Mesos的启动过程总论

  3. 在线生成透明ICO图标神器

    此神器的链接为:http://ico.duduxuexi.com/ 大家可以将这个网址收藏好,本人亲测十分好用!对我们的ios,安卓以及windows开发都有极大的好处.

  4. [Swift]LeetCode37. 解数独 | Sudoku Solver

    Write a program to solve a Sudoku puzzle by filling the empty cells. A sudoku solution must satisfy  ...

  5. [Swift]LeetCode41. 缺失的第一个正数 | First Missing Positive

    Given an unsorted integer array, find the smallest missing positive integer. Example 1: Input: [1,2, ...

  6. [Swift]LeetCode106. 从中序与后序遍历序列构造二叉树 | Construct Binary Tree from Inorder and Postorder Traversal

    Given inorder and postorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  7. RabbitQM使用笔记

    一:安装  and  卸载 curl -s https://packagecloud.io/install/repositories/rabbitmq/rabbitmq-server/script.r ...

  8. Volatile的那些事

    上一篇中,我们了解了Synchronized关键字,知道了它的基本使用方法,它的同步特性,知道了它与Java内存模型的关系,也明白了Synchronized可以保证"原子性",&q ...

  9. Java核心技术及面试指南 多线程并发部分的面试题总结以及答案

    7.2.10.1有T1.T2.T3三个线程,如何保证T2在T1执行完后执行,T3在T2执行完后执行? 用join语句,在t3开始前join t2,在t2开始前join t1. 不过,这会破坏多线程的并 ...

  10. Webpack+Vue如何导入Jquery和Jquery的第三方插件

    创建一个jquery-vendor.js文件 import $ from 'jQuery'; console.log($); window.$ = $; window.jQuery = $; expo ...