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

最终通过如下代码实现：

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. nyoj 206-矩形的个数 (a*b*(a+1)*(b+1)/4)

    206-矩形的个数 内存限制:64MB 时间限制:1000ms 特判: No 通过数:16 提交数:37 难度:1 题目描述: 在一个3*2的矩形中,可以找到6个1*1的矩形,4个2*1的矩形3个1* ...

  2. 安卓手机运行fedora

    安卓手机使用容器运行其他linux,一般两种: 1. termux + rootfs.img + proot,依赖api>=21,不必root但受限. 2. linuxdeploy + proo ...

  3. web前端面试题总结（html、css）

    1.对 WEB 标准以及 W3C 的理解与认识? 参考: 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链 css 和 js 脚本. 结构行为表现的分离.文件下载与页面速度更快.内容能 ...

  4. workspaces only allow trusted client with self-signed cert

    1. 生成ca. openssl genrsa -out CA_neonone.workspace.key 2048 openssl req -x509 -new -nodes -key CA_neo ...

  5. 新闻实时分析系统-Kafka分布式集群部署

    Kafka是由LinkedIn开发的一个分布式的消息系统,使用Scala编写,它以可水平扩展和高吞吐率而被广泛使用.目前越来越多的开源分布式处理系统如Cloudera.Apache Storm.Spa ...

  6. 【POJ 2823】【Luogu P1886】Sliding Window 滑动窗口

    POJ 2823 Luogu P1886 [解题思路] 这是一个单调队列算法的经典题目,几乎学习单调队列的人都接触过这题. 利用单调队列算法求出每一个固定区间内的最(大/小)值. 以下以最大值为例: ...

  7. Java常见网络操作（URL类，InetAddress类，URLConnection类）

    *****************InetAddress********************** InetAddress:用于标识网络上的硬件资源(如,IP,主机名,域名等).    对于Inet ...

  8. node.js+react全栈实践

    利用业余时间写了个简单的项目,使用react+node.js做的一个全栈实践项目,前端参考了[React-Admin-Starter](https://github.com/veryStarters/ ...

  9. json注记

    Javascript支持的转换方式  eval('(' + jsonstr + ')'); //可以将json字符串转换成json对象,注意需要在json字符外包裹一对小括号 注:ie8(兼容模式), ...

  10. Kafka 0.10.0.1 consumer get earliest partition offset from Kafka broker cluster - scala code

    Return: Map[TopicPartition, Long] Code: val props = new Properties() props.put(ConsumerConfig.BOOTST ...