Question

我有一个带有标题和文本输入的导航栏。导航栏为浅红色，并且标题为白色，因此很容易看到。但是，输入中的占位符（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-placeholder。
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>

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;
    }

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

2 个答案: