Несколько стилей для ввода текста заполнителя

Я хочу, чтобы стиль текста ввода заполнителя ввода, который я делаю так:

::-webkit-input-placeholder { font-size: 16pt; color: #555; }
::-moz-placeholder { font-size: 16pt; color: #555; }
:-ms-input-placeholder { font-size: 16pt; color: #555; }
input:-moz-placeholder { font-size: 16pt; color: #555; }

Но у меня есть сценарии, где разные заполнители требуют разных стилей, таких как:

Можно ли это сделать? Кажется, я не смог успешно скомпоновать css выше с классами или другим типом селектора элементов. Все обучающие программы, которые я нашел, останавливаются при простом задании текста-заполнителя один раз и не получают много стилей-заполнителей. Это глобальная настройка?

Ответ 1

Вам нужно объединить класс с псевдоэлементом, а затем вы можете применить класс к входным элементам:

input::-webkit-input-placeholder { font-size: 16pt; color: #555; }
input::-moz-placeholder { font-size: 16pt; color: #555; }
input:-ms-input-placeholder { font-size: 16pt; color: #555; }
input:-moz-placeholder { font-size: 16pt; color: #555; }

input.other::-webkit-input-placeholder { font-size: 12pt; color: red; }
input.other::-moz-placeholder { font-size: 12pt; color: red; }
input.other:-ms-input-placeholder { font-size: 12pt; color: red; }
input.other:-moz-placeholder { font-size: 12pt; color: red; }

<input type="text" placeholder="Hello"></input>
<input type="text" class="other" placeholder="Hello"></input>

Ответ 2

Использование классов на ваших входах должно работать. Пробовали ли вы следующее:

/* WebKit browsers */
input.myClassNameOne::-webkit-input-placeholder { 
    font-size: 16pt; color: #555;
}

/* Mozilla Firefox 4 to 18 */
input.myClassNameOne:-moz-placeholder { 
    font-size: 16pt; color: #555;
}

/* Mozilla Firefox 19+ */
input.myClassNameOne::-moz-placeholder { 
    font-size: 16pt; color: #555;
}

/* Internet Explorer 10+ */
input.myClassNameOne:-ms-input-placeholder {
    font-size: 16pt; color: #555;
}

<input type="text" class="myClassNameOne" placeholder="test input" />
<input type="text" class="myClassNameTwo" placeholder="test input" />

Ответ 3

Хотя другие ответы верны, я хотел бы отметить, что вам не нужно применять класс непосредственно к вводу. Вы также можете применить его к какой-либо родительской оболочке и слегка изменить предлагаемый CSS для достижения того же результата, что, возможно, проще, так как вам может потребоваться сделать меньше изменений в вашем HTML.

Пример (также см. fiddle):

.default ::-webkit-input-placeholder { font-size: 16pt; color: #555; }
.default ::-moz-placeholder { font-size: 16pt; color: #555; }
.default :-ms-input-placeholder { font-size: 16pt; color: #555; }
.default input:-moz-placeholder { font-size: 16pt; color: #555; }

.other ::-webkit-input-placeholder { font-size: 12pt; color: red; }
.other ::-moz-placeholder { font-size: 12pt; color: red; }
.other :-ms-input-placeholder { font-size: 12pt; color: red; }
.other input:-moz-placeholder { font-size: 12pt; color: red; }

<div class='default'>
    <input placeholder='default'/>
    <input placeholder='default'/>
    <input placeholder='default'/>
</div>
    
<div class='other'>
    <input placeholder='other'/>
    <input placeholder='other'/>
    <input placeholder='other'/>
</div>