使用输入字段实现导航栏：背景颜色和文本颜色

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，谷歌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月：大多数现代浏览器都支持简单的伪元素::占位符

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>

Answer 2

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

    ::placeholder { /* Most modern browsers support this now. */
       color:    #fff;
    }