风格输入占位符

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" /> \t 
 
</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" /> \t 
 
</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" /> \t 
 
</form>

我问，因为我读somwhere，如果你组的CSS它将完全

Answer 1

得到期望的风格，以各种形式之间的通用类。 （如.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" /> \t 
 
</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" /> \t 
 
</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" /> \t 
 
</form>

Answer 2

忽略添加多个选择到您的规则：

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

Answer 3

添加一个共同的CL屁股在所有三种形式和风格。

.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" /> \t 
 
</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" /> \t 
 
</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" /> \t 
 
</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/