我在输入表单字段中有一个占位符文本,我似乎不能将颜色更改为白色,它出现为灰色,但仅在Firefox上. Chrome浏览器似乎很好.

当您输入字段时显示正确的颜色,它只是初始占位符不响应.

任何帮助将不胜感激,谢谢.

CSS：

input#myinput::-webkit-input-placeholder {
    color:#FFF; background-color:#CCC; 
}
input#myinput::-moz-placeholder { 
    color:#FFF; background-color:#CCC;  
}
input#myinput:-moz-placeholder { 
    color:#FFF; background-color:#CCC; 
}
input#myinput::-ms-input-placeholder { 
    color:#FFF; background-color:#CCC; 
}   /* IE10+ */

input[type="text"]{
    width:170px; height:16px; padding:12px 5px; border:none; 
    color:#FFF; font:14px/14px 'Arial',Helvetica,sans-serif; 
    text-align:center; background-color:#CCC;
}

Heres my fiddle

添加不透明度：1到Firefox占位符.

查看更新fiddle

我想在输入的占位符中添加图像图标，如下图所示：

请注意，这是占位符，所以当用户开始打字时，图标也会消失。

我使用:: – webkit-input-placeholder和:: before，为webkit(Safari Chrome)提供了以下解决方案。不幸的是，对mozilla的直接应用似乎不起作用。

所以我的问题是：是否有一个跨浏览器解决方案来添加图像图标到输入占位符？

webkit解决方案：

#myinput::-webkit-input-placeholder::before { 
    content: ' ';
    position: absolute;
    top: 2px; /* adjust icon position */
    left: 0px;
    width: 14px; /* size of a single icon */
    height: 14px;
    background-image: url("/path/to/icons.png"); /* all icons in a single file */
    background-repeat: no-repeat;
    background-position: -48px 0px; /* position of the right icon */
}

>您可以将其设置为背景图像，并使用文本缩进或填充将文本向右移动。
>你可以把它分解成两个元素。

老实说，我会避免使用HTML5 / CSS3，而没有好的回退。只有太多的人使用旧的浏览器，不支持所有新的花哨的东西。这将需要一段时间，我们可以放弃后备，不幸的是:(

我提到的第一种方法是最安全和最简单的方法。两种方式都需要Javascript来隐藏图标。

CSS：

input#search {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

HTML：

<input type="text" id="search" name="search" onchange="hideIcon(this);" value="search" />

使用Javascript：

function hideIcon(self) {
    self.style.backgroundImage = 'none';
}

2013年9月25日

我不敢相信我说“两种都需要JavaScript来隐藏图标”，因为这不完全是真的。

隐藏占位符文本的最常见时机正在改变，如本答案中所提到的。对于图标，但是可以将它们隐藏在可以在CSS中使用活动伪类的焦点上。

#search:active { background-image: none; }

哎，使用CSS3可以让它消失！

http://jsfiddle.net/2tTxE/

2013年11月5日

当然，也有CSS3 :: before伪元素。小心浏览器支持虽然！

Chrome  Firefox     IE      Opera   Safari
:before     (yes)   1.0         8.0     4       4.0
::before    (yes)   1.5         9.0     7       4.0

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

我知道Internet Explorer不支持输入标签的占位符属性,但肯定在2012年必须有另一个解决方案的IE？

我写了一个jQuery插件一回,将添加占位符支持任何不支持它的浏览器.

Placeholder Text in IE

两个问题：

>我试图使占位符文本为白色。但它不工作。我使用Bootstrap 3. JSFiddle demo
>另一个问题是如何在不全局改变占位符颜色。也就是说，我有多个字段，我只想要一个字段有白色占位符，所有其他字段保持默认颜色。

提前致谢。

html：

<form id="search-form"role="search">
    <div>
        <div> <i></i>
            <input type="search"placeholder="search" />
        </div>
    </div>
</form>

css：

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
    background-color:#303030;
    font-size: 13px;
    color:white;

}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    /*  pointer-events: none; */
    cursor: pointer;
    color:white;
}


/* do not group these rules*/
::-webkit-input-placeholder { color: white; }
FF 4-18 
:-moz-placeholder           { color: white; }
 FF 19+
::-moz-placeholder          { color: white; }
 IE 10+
:-ms-input-placeholder      { color: white; }

将占位符分配给类选择器，如下所示：

.form-control::-webkit-input-placeholder { color: white; }
.form-control:-moz-placeholder { color: white; }
.form-control::-moz-placeholder { color: white; }
.form-control:-ms-input-placeholder { color: white; }

它会工作，因为一个更强的选择器可能是覆盖你的全球。我在一个平板电脑，所以我不能检查和确认哪个更强的选择器是:)但它的工作，我试过它在你的小提琴。

这也回答了你的第二个问题。通过将它分配给一个类或id，并给一个输入只有该类，你可以控制什么输入风格。