如图：搜索和图标不是垂直居中着实难受

最终通过如下代码实现：

input::-webkit-input-placeholder {

  transform: translate(0, 2px);

}

当placeholder的字体大小跟input大小不一致时，实现placeholder垂直居中的更多相关文章

  1. 当placeholder的字体大小跟input大小不一致，placeholder垂直居中

    当placeholder的字体大小跟input大小不一致,实现placeholder垂直居中 设计稿的placeholder的样式是这样的 输入值的时候大小是这样的 最后想要实现的效果是这样的 当我这 ...

  2. input获得焦点时改变placeholder文本的样式

    HTML: <input type="text" placeholder="sample text"/> CSS: input::-webkit-i ...

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

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

  4. jquery.placeholder.min.js让吃屎的IE浏览器支持placeholder去吧

    描述:现在都是HTML5时代了,所有的浏览器都支持placeholder,唯独IE不支持.现在我们有了这款插件,IE下终于可以支持了!  图片展示:   兼容浏览器:IE6+/Firefox/Goog ...

  5. 设置input中placeholder的样式（placeholder设置字体）

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

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

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

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

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

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

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

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

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

随机推荐

  1. 【前端知识体系-CSS相关】CSS预处理器

    1.常见的CSS预处理器有哪些? [!NOTE] css预处理器:用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作,可以让你的CS ...

  2. Ubuntu 16.04 安装Maven3.3.9

    1 下载地址 http://maven.apache.org/download.cgi 2 将下载到的apache-maven-3.3.9-bin.tar.gz文件上传到/temp目录下,然后切换到r ...

  3. Linux 命令记录

    记录Linux下使用过的命令: Linux端 1.测试当前系统支持语言(我这用的是xshell,如果出现乱码,则在file-properties-terminal-encoding中,设置为utf-8 ...

  4. Java基础知识总结之1.8新特性lambda表达式

    函数式接口 函数式接口(functional interface 也叫功能性接口,其实是同一个东西).简单来说,函数式接口是只包含一个方法的接口.比如Java标准库中的java.lang.Runnab ...

  5. 【集合系列】- 深入浅出的分析 Hashtable

    一.摘要 在集合系列的第一章,咱们了解到,Map 的实现类有 HashMap.LinkedHashMap.TreeMap.IdentityHashMap.WeakHashMap.Hashtable.P ...

  6. python3之递归实例

    一.利用递归求: 1+2+3+4+5...+n的前n项和 def recursion_sum_1(n): #当n = 1:和为1 #否则,n的和等同于 n + (n -1) if n == 1: re ...

  7. selenium常用命令之操作页面元素及获取元素内容的事件整理

    /**id <input type="text" id="phone" name="phone" class="LoginT ...

  8. 献给那些想自建站搭建博客的新人们(实篇)wordpress

    实验材料 windows或者linux(因为我是大学操作系统学的是windows,后来服务器转向了linux,所以我将针对window和linux分别进行开展) xampp(最佳php5.6 在7.1 ...

  9. JS进阶面试题整理（仅仅整理我做错的题）

    前几天看到掘金博客一篇文章,找到了这个JavaScript进阶问题列表:现在把地址贴出来,想找工作或者想要巩固自己JS的同学可以参考 该文档会不定时更新    一.箭头函数 箭头函数相当于匿名函数,并 ...

  10. day20191205笔记

    Tips: 1.课堂效率 2.每天回顾昨天学习内容,趁热打铁+查漏补缺.(上课笔记,回去补充.) 默写: 1.请说出(访问修饰符)作用域public,private,protected,以及不写时的区 ...