样式输入占位符

Question

我的网站上有 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 它将被完全忽略

Answer 1

将多个选择器添加到您的规则中：

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

Answer 2

在所有三种形式中添加一个常见的 class 并为其设置样式。

.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>

Answer 3

将所需样式赋予所有表单之间的通用 class。（例如.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>

Answer 4

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

.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/

样式输入占位符

Style input placeholders

html

css

forms

placeholder