我在做页面的时候遇到过这种情况，在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. Java中的内存处理机制和final、static、final static总结

    Java中的内存处理机制和final.static.final static总结   装载自:http://blog.csdn.net/wqthaha/article/details/20923579 ...

  2. 关于解决用tutorial7教程中的代码打造一款自己的播放器中的声音噪音问题

    ////////////////////////////////////////////////////////////////////////////////////////////对于用FFMPE ...

  3. nodejs基础 -- EventEmitter

    var events = require('events'); nodejs所有的异步I/O操作在完成时都会发送一个事件到事件队列 nodejs里面的许多对象都会分发事件,如: 一个net.Serve ...

  4. DB2多行转一行【XML方式】

    分组然后合并,然后去除XML标签 SELECT replace(replace(replace(xml2clob(xmlagg(xmlelement(name A, [字段]))),'</A&g ...

  5. Labview按钮的机械动作

    LabVIEW 对于按钮控件的机械动作提供了六个不同的选择,它们可以通过右键按钮并选择机械动作来找到.这些不同的选项导致按钮输出的值的行为不同.下里将这六个选项做一个简短的总结: 单击时转换当用鼠标将 ...

  6. CentOS查看你是否有USB 3.0端口

    近来的大多数的新计算机都有了USB 3.0接口了.但是你怎么知道你的计算机有没有USB 3.0接口?这篇短文中,我们会告诉如何在Linux下知道你的系统上有USB 3还是USB3接口. 在Linux终 ...

  7. openal资料转贴

    地址:http://blog.sina.com.cn/s/blog_685b5b220100ukbp.html OpenAL简介 OpenAL(Open Audio Library)是专门负责3D定位 ...

  8. jquery promise

    认识jQuery的Promise   先前了解了ES6的Promise对象,来看看jQuery中的Promise,也就是jQuery的Deferred对象. 打开浏览器的控制台先. <scrip ...

  9. linux 数据盘和系统盘的查看

    系统盘就像linux的c盘,使用df -l命令查看 如下所示: 可以看到根路径 / 都是位于系统盘.而/root,/home,/usr就如同c盘下的c:\windows,c:\usr这些目录 如果单独 ...

  10. 07python之字符串的常用方法

    字符串作为python中常用的数据类型,掌握字符串的常用方法十分必要. 常用知识点: 1.字符串的3种格式化方法 2.字符串的strip()方法 3.字符串的join()方法 4.字符串可以切片 1. ...