css - 使用输入字段 : background-color and text color 实现导航栏

Question

我有一个带有标题和文本输入的导航栏。导航栏是浅红色的，而 TITLE 是白色的，因此很容易看到。但是，输入中的占位符 (SEARCH STUFF) 几乎不可见，因为它是灰色的，而且我稍后输入的文本也是如此。我试图更改文本输入的颜色，但没有成功。我怎样才能做到这一点？是否也可以更改整个输入字段的颜色以使其更清晰可见？

<div class="navbar-fixed">
<nav>
  <div class="nav-wrapper red lighten-2">
    <div class="container">
      <a href="#!" class="brand-logo">TITLE</a>
      <ul class="right">
        <li>
          <input id="select" type="text" placeholder="SEARCH STUFF">
        </li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

如果你想改变placeholder的颜色，只需使用下面的伪元素

存在三种不同的实现方式:伪元素、伪类和无。

• WebKit、Blink(Safari、Google 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-占位符。

• 2017 年 4 月:大多数现代浏览器支持简单伪元素::placeholder

input{
     color:white;
}


input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:white;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:white;
   opacity:  1;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:white;
   opacity:  1;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:white;
}
input::-ms-input-placeholder { /* Microsoft Edge */
    color:white;
}

input::placeholder { /* Most modern browsers support this now. */
   color:white;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet"/>
<div class="navbar-fixed">
<nav>
  <div class="nav-wrapper red lighten-2">
    <div class="container">
      <a href="#!" class="brand-logo">TITLE</a>
      <ul class="right">
        <li>
          <input id="select" type="text" placeholder="SEARCH STUFF">
        </li>
      </ul>
    </div>
  </div>
</nav>