样式输入占位符答案

【问题标题】：Style input placeholders样式输入占位符
【发布时间】：2017-04-07 13:00:08
【问题描述】：

我的网站上有 3 个表单，我想为它们的占位符设置样式。我希望网站上的所有其他输入保持自己的样式。在我看来，我设法为一种形式的输入设置样式，但是如何为所有 3 种形式分组样式

.one-form input::-webkit-input-placeholder { color: #d6d6d6; }
.one-form input:-moz-placeholder { /* Firefox 18- */ color: #d6d6d6; }
.one-form input::-moz-placeholder {  /* Firefox 19+ */ color: #d6d6d6; }
.one-form input:-ms-input-placeholder {   color: #d6d6d6; }

<form class="one-form" action="" method="post">
  <input type="text" name="log" placeholder="Username"/>
  <input type="password" name="pwd" placeholder="Password" />
  <input type="submit" name="1-submit" id="1-submit" value="Start" /> 	
</form>

<form class="three-form" action="" method="post">
  <input type="text" name="smthing" placeholder="Username"/>
  <input type="password" name="someth" placeholder="Password" />
  <input type="submit" name="1-submit" id="1-submit" value="Start" /> 	
</form>

<form class="two-form" action="" method="post">
  <input type="text" name="smth" placeholder="Username"/>
  <input type="password" name="some" placeholder="Password" />
  <input type="submit" name="1-submit" id="1-submit" value="Start" /> 	
</form>

我问是因为我在某处读到，如果你对 css 进行分组，它将被完全忽略

【问题讨论】：

标签： html css forms placeholder

【解决方案1】：

我不知道我是否理解正确，但你可以这样做

.one-form input::-webkit-input-placeholder,
.two-form input::-webkit-input-placeholder,
.three-form input::-webkit-input-placeholder{ color: #d6d6d6; }

.one-form input:-moz-placeholder,
.two-form input:-moz-placeholder,
.three-form input:-moz-placeholder{ /* Firefox 18- */ color: #d6d6d6; }

.one-form input::-moz-placeholder,
.two-form input::-moz-placeholder,
.three-form input::-moz-placeholder{  /* Firefox 19+ */ color: #d6d6d6; }

.one-form input:-ms-input-placeholder,
.two-form input:-ms-input-placeholder,
.three-form input:-ms-input-placeholder{   color: #d6d6d6; }

JSfiddle：https://jsfiddle.net/ts57n0np/

【讨论】：

@kilogram 这个答案的代码量是它需要的 3 倍。你最好在元素上放置一个通用类，这样你只需要设置一次样式：stackoverflow.com/a/40765857/4573410
哦，是的，我现在也这么认为。我正在放一个普通班

【解决方案2】：

为所有表单之间的公共类赋予所需的样式。（例如.one-form）

.one-form input::-webkit-input-placeholder { color: #d6d6d6; }
.one-form input:-moz-placeholder { /* Firefox 18- */ color: #d6d6d6; }
.one-form input::-moz-placeholder {  /* Firefox 19+ */ color: #d6d6d6; }
.one-form input:-ms-input-placeholder {   color: #d6d6d6; }

<form class="one-form" action="" method="post">
  <input type="text" name="log" placeholder="Username"/>
  <input type="password" name="pwd" placeholder="Password" />
  <input type="submit" name="1-submit" id="1-submit" value="Start" /> 	
</form>

<form class="three-form one-form" action="" method="post">
  <input type="text" name="smthing" placeholder="Username"/>
  <input type="password" name="someth" placeholder="Password" />
  <input type="submit" name="1-submit" id="1-submit" value="Start" /> 	
</form>

<form class="two-form one-form" action="" method="post">
  <input type="text" name="smth" placeholder="Username"/>
  <input type="password" name="some" placeholder="Password" />
  <input type="submit" name="1-submit" id="1-submit" value="Start" /> 	
</form>

【讨论】：

【解决方案3】：

以所有三种形式添加一个通用类并为其设置样式。

.custom-form input::-webkit-input-placeholder { color: #d6d6d6; }
.custom-form input:-moz-placeholder { /* Firefox 18- */ color: #d6d6d6; }
.custom-form input::-moz-placeholder {  /* Firefox 19+ */ color: #d6d6d6; }
.custom-form input:-ms-input-placeholder {   color: #d6d6d6; }

<form class="one-form custom-form" action="" method="post">
  <input type="text" name="log" placeholder="Username"/>
  <input type="password" name="pwd" placeholder="Password" />
  <input type="submit" name="1-submit" id="1-submit" value="Start" /> 	
</form>

<form class="three-form custom-form" action="" method="post">
  <input type="text" name="smthing" placeholder="Username"/>
  <input type="password" name="someth" placeholder="Password" />
  <input type="submit" name="1-submit" id="1-submit" value="Start" /> 	
</form>

<form class="two-form custom-form" action="" method="post">
  <input type="text" name="smth" placeholder="Username"/>
  <input type="password" name="some" placeholder="Password" />
  <input type="submit" name="1-submit" id="1-submit" value="Start" /> 	
</form>

【讨论】：

【解决方案4】：

在规则中添加多个选择器：

.one-form input::-webkit-input-placeholder,
.two-form input::-webkit-input-placeholder,
.three-form input::-webkit-input-placeholder
{
   color: #d6d6d6;
}

【讨论】：