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

最终通过如下代码实现：

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. Java——内部类详解

    说起内部类,大家肯定感觉熟悉又陌生,因为一定在很多框架源码中有看到别人使用过,但又感觉自己使用的比较少,今天我就带你具体来看看内部类. 内部类基础 所谓内部类就是在类的内部继续定义其他内部结构类. 在 ...

  2. ubuntu 16.04源码编译OpenCV教程 | compile opencv on ubuntu 16.04

    本文首发于个人博客https://kezunlin.me/post/15f5c3e8/,欢迎阅读! compile opencv on ubuntu 16.04 Series Part 1: comp ...

  3. 如何编译和使用自定义Qt动态链接库 | how to build and use user-defined qt library

    本文首发于个人博客https://kezunlin.me/post/cf628dd8/,欢迎阅读! guide to build qt library and use in another proje ...

  4. UCloud 云服务内容审核 Java 版本实现

    前言 最近不少小伙伴反映上传小黄图偶尔性的异常,并且不能上传动态图片,很是苦恼!无她,鉴黄API还没有这么智能,毕竟是自己训练的,不是那么专业!为了更好的服务广大网友,撸主决定接入更加智能快速的鉴黄服 ...

  5. linux awk进阶篇

    上一篇主要是awk的进本应用.本节是awk的进阶篇 ACTION:除去常用的print和printf还有以下几个 expression:表达式 如$1>3 control statements: ...

  6. cookies与session简介

    一.session和cookie 简单来讲cookie机制采用的是在客户端保持状态的方案,而session机制采用的是在服务器端保持状态的方案. 同时我们也看到,由于采用服务器端保持状态的方案在客户端 ...

  7. EFK教程(4) - ElasticSearch集群TLS加密通讯

    基于TLS实现ElasticSearch集群加密通讯 作者:"发颠的小狼",欢迎转载 目录 ▪ 用途 ▪ ES节点信息 ▪ Step1. 关闭服务 ▪ Step2. 创建CA证书 ...

  8. centos 7 Atlas keepalived 实现高可用 MySQL 5.7 MHA环境读写分离

    目录 简介 相关链接 环境准备 Atlas 环境 MySQL 集群环境 Atlas 安装 和 配置 为数据库的密码加密 修改配置文件 启动 Keepalived 安装配置 安装 master 配置 K ...

  9. 深入了解CSS中盒子模型

    CSS中盒子模型介绍 什么是盒子? 盒子是用来存储物品,我们可以将盒子理解为酒盒,酒盒有什么组成的呢? 有酒可以喝.有填充物保护酒防止酒被摔坏.纸盒子. 我们怎么理解CSS中的盒子呢,CSS中盒子有什 ...

  10. 使用IDEA2017.3.5搭建SSM框架

    转载自博客园,附上原文地址https://www.cnblogs.com/hackyo/p/6646051.html?utm_source=itdadao&utm_medium=referra ...