我如何找到默认占位符设置

How can I find out default placeholder setting

本文关键字：占位符 设置 默认 何找      更新时间：2023-09-26

我正在创建一个下拉菜单，这将是旁边的一个框内的占位符。我希望这两个文本框内出现相同的。我想知道，我如何从文本框中找到默认属性，以便我可以在下拉菜单中使用这些属性?

<input type="text" placeholder="Gray Default">
<select>
  <option>Black Default
  </option>
</select>

我希望两个框的样式看起来相同。我只是不知道如何找到确切的默认设置

要检查默认浏览器样式，可以使用window.getComputedStyle()。不幸的是，每个浏览器都使用自己的伪类/伪元素名称作为占位符:

  • WebKit和Blink (Safari, Google Chrome, Opera 15+)使用伪元素:::-webkit-input-placeholder。
  • Mozilla Firefox 4到18使用伪类::-moz-placeholder (one冒号)。
  • Mozilla Firefox 19+使用伪元素:::-moz-placeholder，但是旧的选择器仍然会工作一段时间。
  • Internet Explorer 10使用伪类::-ms-input-placeholder .

IE 9及以上版本歌剧直到版本12不支持任何CSS选择器的占位符。

(摘自这个伟大的回答)

示例代码

我用这段代码发现我的Firefox占位符是黑色的，不透明度为0.54。

var firstInput = document.getElementsByTagName('input')[0],
    placeholderStyles = window.getComputedStyle(firstInput, '::-moz-placeholder');
console.log('Color: ' + placeholderStyles.getPropertyValue('color'));
console.log('Opacity: ' + placeholderStyles.getPropertyValue('opacity'));
<input type="text" placeholder="blah, blah">

试试这个

select {
  color:  rgb(0,0,0);
  opacity:0.54;
}
<input type="text" placeholder="Gray Default" >
<select>
  <option>Changed to Gray
  </option>
</select>

相关文章：