我在做页面的时候遇到过这种情况，在input标签中有默认字，但是设计稿上的颜色和input标签中的placeholder的默认颜色不一致。虽然我们可以在js中写出，但是有点过于麻烦了。

所以我就用css来给它设置了一下（注意css中有可能存在兼容性问题，如果实在不行还得用js。不过一般要求不严可以用这个偷偷懒）。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

        <style>

             #txt{

    　　　　　　　height:100%;

　　　　　　　　　 width:230px;

　　　　　　　　　 font-size:12px;color:red;

　　　　　　　 }

　　　　　　　　　#txt::-webkit-input-placeholder{

　　　　　　　　　　　color:red;

　　　　　　　　　}

        </style>

</head>

<body>

    <input type="text" id="txt" placeholder="请输入主题或关键词"/>

</body>

</html>

这样我们就可以用更少的时间做更多的事了。

如何用css给input的placeholder设置颜色的更多相关文章

  1. css改变input输入框placeholder值颜色

    ::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Fi ...

  2. 改变input的placeholder字体颜色

    改变input的placeholder字体颜色,注意哦,只是placeholder的字,用户输入的字不可以 input::-webkit-input-placeholder{ coloc:#000; ...

  3. input修改placeholder中颜色和字体大小

    input::-webkit-input-placeholder { /* placeholder颜色 */ color: #aab2bd; /* placeholder字体大小 */ font-si ...

  4. 设置input标签placeholder字体颜色

    有时会遇到这样的需求,输入框的默认提示文字与用户输入的文字不同. <input className="city" placeholder="城市"/> ...

  5. css 修改input中placeholder提示问题颜色

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: rgba(74, 87, 103, 1); ...

  6. input的placeholder的颜色、字号、边距设置

    #scbar_txt::-webkit-input-placeholder { /* WebKit browsers */    text-indent: 10px; font-size:16px; ...

  7. input的placeholder文字颜色修改

    input::-webkit-input-placeholder { color: #D6D0CA !important; /* WebKit browsers / } input:-moz-plac ...

  8. input type=color 设置颜色

    在设置背景色的时候,使用html5 type=color 标签,但是初始值一直都是黑色的,背景如果没有设置的时候,应该是白色,比如文本图元,所以需要设置一个初始的颜色值, 注意: value不实用,怎 ...

  9. input修改placeholder文字颜色

    少废话,上代码: <style> input::-webkit-input-placeholder{ color:red; } input::-moz-placeholder{ /* Mo ...

随机推荐

  1. matlab下使用svmlib工具包

    虽然网络上已经有了很多的类似的东西了吧.但是呢,我自己还是要写一写的. 安装: 对于 libsvm工具包,我们可以去官方网站下载,网址为:http://www.csie.ntu.edu.tw/~cjl ...

  2. CentOS 7在桌面添加快捷方式

    直接把 /usr/share/applications 对应的 xxx.desktop 文件复制到桌面就OK!比如要在桌面创建Google Chrome Browser的快捷方式,直接在找到 /usr ...

  3. erlang-百度云推送Android服务端功能实现-erlang

    百度云推送官方地址http://developer.baidu.com/wiki/index.php?title=docs/cplat/push 简单的介绍下原理: 百度云推送支持IOS和Androi ...

  4. Mac OS Yosemite 文件批量重命名

    首先,我们选中一个文件夹   右键,或者回车,给一个文件夹改名   同时选中三个文件夹   右键,选中批量更改   弹出批量更改,进行更改   改好后点回车,就能看到效果了   继续操作,完成所有文件 ...

  5. opengl 模板测试 glStencilOp glStencilFunc

    下面来设置蒙板缓存和蒙板测试. 首先我们启用蒙板测试,这样就可以修改蒙板缓存中的值. 下面我们来解释蒙板测试函数的含义: 当你使用glEnable(GL_STENCIL_TEST)启用蒙板测试之后,蒙 ...

  6. Spring-更多DI的知识

    3.3.1 延迟初始化Bean 延迟初始化也叫做惰性初始化,指不提前初始化Bean,而是只有在真正使用时才创建及初始化Bean. 配置方式很简单只需在<bean>标签上指定 “lazy-i ...

  7. js焦点轮播图

    汇集网上焦点轮播图的实现方式,自己试了下,不过鼠标悬浮停止动画和鼠标离开动画播放好像没生效,不太明白,最后两行代码中,为什么可以直接写stop和play.不用加括号调用函数么?求懂的大神指点! 所用知 ...

  8. 对于MathType中公式与文字错位的问题怎么解决

    MathType是强大的数学公式编辑器,与常见的文字处理软件和演示程序配合使用,能够在各种文档中加入复杂的数学公式和符号,可用在编辑数学试卷.书籍.报刊.论文.幻灯演示等方面,是编辑数学资料的得力工具 ...

  9. Spark Streaming源码分析 – Checkpoint

    PersistenceStreaming没有做特别的事情,DStream最终还是以其中的每个RDD作为job进行调度的,所以persistence就以RDD为单位按照原先Spark的方式去做就可以了, ...

  10. POJ 1661 Help Jimmy(递推DP)

    思路: 1. 每个板子有左右两端, dp[i][0], dp[i][1] 分别记录左右端到地面的时间 2. 从下到上递推计算, 上一层的板子必然会落到下面的某一层板子上, 或者地面上 总结: 1. 计 ...