Chrome支持placeholder attribute input[type=text]
元素(其他人可能也支持) .
但是以下 CSS
没有't do anything to the placeholder'的值:
input[placeholder], [placeholder], *[placeholder] {
color: red !important;
}
<input type="text" placeholder="Value">
Value
仍将保留 grey
而不是 red
.
Is there a way to change the color of the placeholder text?
30 回答
现在我们有一种标准方法将CSS应用于输入的占位符:
::placeholder
伪元素来自this CSS模块级别4草稿 .您可能还想要样式textareas:
实施
有三种不同的实现:伪元素,伪类和什么都没有 .
WebKit,Blink(Safari,谷歌Chrome,Opera 15)和Microsoft Edge正在使用伪元素:
::-webkit-input-placeholder
. [参考文献]Mozilla Firefox 4到18正在使用伪类:
:-moz-placeholder
(一个冒号) . [参考文献]Mozilla Firefox 19正在使用伪元素:
::-moz-placeholder
,但旧的选择器仍然会工作一段时间 . [参考文献]Internet Explorer 10和11正在使用伪类:
:-ms-input-placeholder
. [参考文献]2017年4月: Most modern browsers support the simple pseudo-element ::placeholder [Ref]
Internet Explorer 9及更低版本根本不支持
placeholder
属性,而Opera 12 and lower do not support任何用于占位符的CSS选择器 .关于最佳实施的讨论仍在继续 . 请注意,伪元素的行为与Shadow DOM中的真实元素相同 .
input
上的padding
将不会获得与伪元素相同的背景颜色 .CSS选择器
用户代理需要忽略具有未知选择器的规则 . 见Selectors Level 3:
所以我们需要为每个浏览器单独的规则 . 否则,所有浏览器都会忽略整个组 .
使用说明
小心避免不良对比 . Firefox的占位符似乎默认为不透明度降低,因此需要在此处使用
opacity: 1
.请注意,如果占位符文本不合适,则会将其截断 - 在
em
中调整输入元素的大小,并使用较大的最小字体大小设置对其进行测试 . 不要忘记翻译:对于同一个单词,请使用某些语言need more room .浏览器的HTML支持
placeholder
但没有CSS支持(如Opera)也应该进行测试 .某些浏览器对某些
input
类型(email
,search
)使用其他默认CSS . 这些可能会以意想不到的方式影响渲染 . 使用properties-webkit-appearance
和-moz-appearance
进行更改 . 例:除了toscho的回答,我还注意到Chrome 9-10和Safari 5之间的一些webkit不一致,支持的CSS属性值得注意 .
特别是Chrome 9和10在设置占位符样式时不支持
background-color
,border
,text-decoration
和text-transform
.完整的跨浏览器比较是here .
我在这里尝试了各种组合来改变颜色,在我的移动平台上,最终它是:
这诀窍 .
试试这将有助于您在所有您喜欢的浏览器中工作:
在Firefox和Internet Explorer中,普通输入文本颜色会覆盖占位符的颜色属性 . 所以,我们需要
跨浏览器解决方案:
来源:David Walsh
我认为这段代码会起作用,因为只有输入类型的文本才需要占位符 . 所以这一行CSS足以满足您的需求:
您可以将其用于输入和焦点样式:
对于Bootstrap和Less用户,有一个mixin .placeholder:
对于使用Bourbon的SASS / SCSS用户,它具有内置功能 .
CSS输出,您也可以 grab 这部分并粘贴到您的代码中 .
这个怎么样
没有CSS或占位符,但您获得相同的功能 .
如果您使用autoprefixer,请使用新的
::placeholder
.请注意,不推荐使用Bootstrap中的.placeholder mixin来支持此功能 .
例:
使用自动修复器时,上述内容将转换为所有浏览器的正确代码 .
占位符颜色在不同浏览器中的特定元素上 .
这将设置所有
input
和textarea
占位符的样式 .Important Note: 不要对这些规则进行分组 . 相反,为每个选择器创建一个单独的规则(组中的一个无效选择器使整个组无效) .
Compass有一个开箱即用的mixin .
举个例子:
在SCSS中使用指南针:
See docs for the input-placeholder mixin.
我只是意识到Mozilla Firefox 19的一些东西,浏览器为占位符提供了不透明度值,因此颜色将不是您真正想要的颜色 .
我将
opacity
覆盖为1,所以最好去 .好的,占位符在不同的浏览器中表现不同,所以你需要在CSS中使用浏览器前缀使它们相同,例如Firefox默认为占位符提供透明度,所以需要为你的css添加不透明度1,加上颜色,它不是大多数时候都是一个大问题,但要让它们保持一致是很好的:
您可以使用CSS更改HTML5输入的占位符颜色 . 如果碰巧,你的CSS冲突,这个代码注释工作,你可以使用(!important)如下所示 .
希望这会有所帮助 .
对于Bootstrap用户,如果您正在使用
class="form-control"
,可能存在CSS特异性问题 . 你应该获得更高的优先级:或者如果您使用Less:
如果您正在使用Bootstrap并且无法使其工作,那么可能您错过了Bootstrap本身添加这些选择器的事实 . 这是我们正在谈论的Bootstrap v3.3 .
如果您尝试更改 .form-control CSS类中的占位符,则应该像这样覆盖它:
添加一个非常好的和简单的实际可能性: css filters !
它会设置所有内容,包括占位符 .
以下内容将在同一调色板上设置两个输入,使用色调过滤器进行颜色更改 . 它现在在浏览器中渲染得很好(除了......)
要允许用户动态更改,使用输入类型颜色进行更改或查找细微差别,请查看以下代码段:
来自:https://codepen.io/Nico_KraZhtest/pen/bWExEB
Css过滤器文档:https://developer.mozilla.org/en-US/docs/Web/CSS/filter
对于Sass用户:
这个简短而干净的代码:
尝试这个代码为不同的输入元素不同的风格
例1:
例2:
我不记得我在互联网上找到这段代码片段的地方(它不是我写的,不记得我找到它的地方,也不记得是谁写的) .
只需加载此JavaScript代码,然后通过调用此规则使用CSS编辑占位符:
最简单的方法是:
这样可以正常工作 . DEMO HERE:
这是另一个例子: