风格输入占位符
问题描述:
我的网站上有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它将完全
答
得到期望的风格,以各种形式之间的通用类。 (如.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>
答
忽略添加多个选择到您的规则:
.one-form input::-webkit-input-placeholder,
.two-form input::-webkit-input-placeholder,
.three-form input::-webkit-input-placeholder
{
color: #d6d6d6;
}
答
添加一个共同的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>
答
我不知道,如果我得到这个正确的,但你可以做到这一点
.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倍。你最好把一个普通的类放在元素上,所以你只需要一次样式:http://*.com/a/40765857/4573410 –
哦,是的,我现在也这样想。我正在举办一个共同课 – kilogram