如何找出默认占位符设置

Question

我正在创建一个下拉菜单，该菜单位于其中包含占位符的框旁边。我希望框内的两个文本看起来都一样。我想知道，如何从文本框中找出默认属性，以便我可以在下拉菜单中使用这些属性？

＆＃13;

＆＃13;

<input type="text" placeholder="Gray Default">

<select>
  <option>Black Default
  </option>
</select>

＆＃13;

＆＃13;

＆＃13;

我希望两个盒子的样式看起来都一样。我只是不知道如何找到确切的默认设置

Answer 1

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

  

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

     

IE最高版本9和   Opera   版本12不支持占位符的任何CSS选择器。

（摘自this great answer）

示例代码

我使用此代码发现我的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">

Answer 2

试试这个

＆＃13;

＆＃13;

<div class="choosepart" id="c'.$i.'"></div>

＆＃13;

select {
  color:  rgb(0,0,0);
  opacity:0.54;

}

＆＃13;

＆＃13;

＆＃13;