Вводные заполнители стиля

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

Добавьте одну общую сл задницу во всех трех формах и стиль.

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