html – 如何在IE11中设置输入文本颜色,但不设置占位符颜色

发布时间：2020-12-14 18:35:48 所属栏目：资源来源：网络整理

导读：如何在不影响Internet Explorer 11中占位符字体颜色的情况下更改输入文本框的字体颜色？如果我更改输入中的字体颜色(Fiddle)： HTML： div class="buttonToolbar" input type="text" placeholder="e.g. Stackoverflow"br/div CSS： .buttonToolbar input {

如何在不影响Internet Explorer 11中占位符字体颜色的情况下更改输入文本框的字体颜色？

如果我更改输入中的字体颜色(Fiddle)：

HTML：

<div class="buttonToolbar">
    <input type="text" placeholder="e.g. Stackoverflow"><br>
</div>

CSS：

.buttonToolbar input {
    color: Blue;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-style: italic;
    color: GrayText;
}
::-webkit-input-placeholder { /* WebKit browsers */
     font-style: italic;
     color: GrayText;
}

占位符文本不再是Internet Explorer 11中的默认灰色颜色：

但它确实在Chrome 35中显示：

奖金Chatter

如果我没有设置输入框的样式,则输入框不会被设置样式.更改：

.buttonToolbar input {
    color: Blue;
}

至

.buttonToolbar {
    color: Blue;
}

意味着占位符文本现在可以执行以下操作：

但现在文字颜色没有做它应该做的事情：

我需要的是弄清楚如何使用CSS更改输入的HTML5占位符颜色.

奖金阅读

> Change an HTML5 input’s placeholder color with CSS

解决方法

您的占位符选择器需要更具体,如下所示.

.buttonToolbar input {
    color: Blue;
}
.buttonToolbar input:-ms-input-placeholder { /* Internet Explorer 10+ */
    font-style: italic;
    color: GrayText;
}
.buttonToolbar input::-webkit-input-placeholder { /* WebKit browsers */
     font-style: italic;
     color: GrayText;
}

http://jsfiddle.net/55Sfz/2/

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!