placeholder翻译 使用CSS更改HTML5输入的占位符颜色




textarea placeholder (20)

Chrome支持input[type=text]元素的占位符属性 (其他人也可能这样做)。

但是以下CSS对占位符的值没有任何作用:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value仍然是grey而不是red

有没有办法改变占位符文本的颜色?

https://code.i-harness.com


履行

有三种不同的实现:伪元素,伪类和什么都没有。

  • WebKit,Blink(Safari,谷歌Chrome,Opera 15+)和Microsoft Edge正在使用伪元素::-webkit-input-placeholder[ Ref ]
  • Mozilla Firefox 4到18使用的是伪类:-moz-placeholder一个冒号)。 [ Ref ]
  • Mozilla Firefox 19+使用的是伪元素::-moz-placeholder ,但旧的选择器仍然可以使用一段时间。 [ Ref ]
  • Internet Explorer 10和11使用伪类:-ms-input-placeholder[ Ref ]
  • 2017年4月: 大多数现代浏览器都支持简单的伪元素::placeholder [ Ref ]

Internet Explorer 9及更低版本根本不支持placeholder属性,而Opera 12及更低版本不支持占位符的任何CSS选择器。

关于最佳实施的讨论仍在继续。 请注意,伪元素就像Shadow DOM中的真实元素一样。 input上的padding将不会获得与伪元素相同的背景颜色。

CSS选择器

用户代理需要忽略具有未知选择器的规则。 请参阅选择器级别3

包含无效选择器的一group选择器无效。

所以我们需要为每个浏览器单独的规则。 否则,所有浏览器都会忽略整个组。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

使用说明

  • 小心避免不良对比。 Firefox的占位符似乎默认为不透明度降低,因此需要使用opacity: 1
  • 请注意,如果占位符文本不适合,它就会被截断 - 在em输入元素的大小,并使用最小的字体大小设置进行测试。 不要忘记翻译:某些语言需要更多空间来使用相同的单词。
  • 应该测试支持placeholder但不支持CSS的浏览器(如Opera)的浏览器。
  • 某些浏览器对某些input类型( emailsearch )使用其他默认CSS。 这些可能会以意想不到的方式影响渲染。 使用properties -webkit-appearance-moz-appearance来更改它。 例:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }


好的,占位符在不同的浏览器中表现不同,所以你需要在CSS中使用浏览器前缀使它们相同,例如Firefox默认为占位符提供透明度,所以需要为你的css添加不透明度1,加上颜色,它不是大多数时候都是一个大问题,但要让它们保持一致是很好的:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

如果使用autoprefixer请使用new ::placeholder

请注意,不推荐使用Bootstrap中的.placeholder mixin来支持此功能。

例:

input::placeholder { color: black; }

使用自动修复器时,上述内容将转换为所有浏览器的正确代码。


对于Sass用户:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

对于BootstrapLess用户,有一个mixin .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

对于使用Bourbon SASS / SCSS用户,它具有内置功能。

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

CSS输出,您也可以抓住这部分并粘贴到您的代码中。

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

尝试这个代码为不同的输入元素不同的风格

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

例1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

例2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

您可以将其用于输入和焦点样式:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

您可能还想要样式textareas:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

我只是意识到Mozilla Firefox 19+的一些东西,浏览器为占位符提供了不透明度值,因此颜色将不是您真正想要的颜色。

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

我将opacity覆盖为1,所以最好去。


我在这里尝试了各种组合来改变颜色,在我的移动平台上,最终它是:

-webkit-text-fill-color: red;

这诀窍。


最简单的方法是:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

添加一个实际非常好的和简单的可能性: css过滤器

它会设置所有内容,包括占位符。

以下内容将在同一调色板上设置两个输入,使用色调过滤器进行颜色更改。 它现在在浏览器中渲染得很好(除了......)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}
<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

要允许用户动态更改,使用输入类型颜色进行更改或查找细微差别,请查看以下代码段:

来自: https://codepen.io/Nico_KraZhtest/pen/bWExEBhttps://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()
<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Css过滤器文档: https://developer.mozilla.org/en-US/docs/Web/CSS/filterhttps://developer.mozilla.org/en-US/docs/Web/CSS/filter


试试这将有助于您在所有您喜欢的浏览器中工作:

::-webkit-input-placeholder { 
    /* Chrome/Opera/Safari */
      color: pink;
    }
    ::-moz-placeholder { 
    /* Firefox 19+ */
      color: pink;
    }

    :-moz-placeholder { 
    /* Firefox 18- */
      color: pink;
    }

跨浏览器解决方案:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

图片来源: David Walsh


这个简短而干净的代码:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

这是另一个例子:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}
<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>


除了toscho的回答,我还注意到Chrome 9-10和Safari 5之间的一些webkit不一致,支持的CSS属性值得注意。

特别是在为占位符设置样式时,Chrome 9和10不支持background-colorbordertext-decorationtext-transform

完整的跨浏览器比较在here


/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

这将设置所有inputtextarea占位符的样式。

重要说明:请勿对这些规则进行分组。 相反,为每个选择器创建一个单独的规则(组中的一个无效选择器使整个组无效)。





html-input