我在做页面的时候遇到过这种情况，在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. TensorFlow基础笔记(14) 网络模型的保存与恢复_mnist数据实例

    http://blog.csdn.net/huachao1001/article/details/78502910 http://blog.csdn.net/u014432647/article/de ...

  2. (转)如何基于FFMPEG和SDL写一个少于1000行代码的视频播放器

    原文地址:http://www.dranger.com/ffmpeg/ FFMPEG是一个很好的库,可以用来创建视频应用或者生成特定的工具.FFMPEG几乎为你把所有的繁重工作都做了,比如解码.编码. ...

  3. Android开源库集锦(转)

    一.兼容类库 ActionBarSherlock : Action Bar是Android 3.0后才开始支持的,ActionBarSherlock是让Action Bar功能支持2.X后的所有平台, ...

  4. caffe源代码分析--Blob类代码研究

    作者:linger 转自须注明转自:http://blog.csdn.net/lingerlanlan/article/details/24379689 数据成员 shared_ptr<Sync ...

  5. 一、Open CV3.0.0 与 VS2012配置

    原创:博乐Bar,转载请注明出处. 第一步,准备软件及开发环境 1.OpenCV 3.0.0 下载地址:http://www.opencv.org.cn/index.php/Download ,下载最 ...

  6. Ironic , Openstack Baremetal Hypervisor

    Ironic , Openstack Baremetal Hypervisor,首发于UnitedStack Inc.. 转自: http://ju.outofmemory.cn/entry/4876 ...

  7. Z字形扫描矩阵

    问题描述 在图像编码的算法中,需要将一个给定的方形矩阵进行Z字形扫描(Zigzag Scan).给定一个n×n的矩阵,Z字形扫描的过程如下图所示: 对于下面的4×4的矩阵, 1 5 3 9 3 7 5 ...

  8. wd mycloud nas新玩法

    最近家里的小米路由器坏了,主要是硬盘读取不出,小米之家也无能为力,本想继续在小米之家买个小米路由器,后来了解到了nas,于是想折腾下.我的nas型号是wd mycloud,3TB内置硬盘.功能:可以组 ...

  9. php date strtotime的用法

    1.上个月第一天及最后一天. echo date('Y-m-01', strtotime('-1 month')); echo strtotime(date('Y-m-01 0:00:00', str ...

  10. JavaScript ES2015

    <button>一</button> <button>二</button> <button>三</button> <but ...