Изменяем оформление placeholder

19.10.2015
Кажется, какие тут могут быть проблемы с изменением, например, цвета текста в placeholder?
Но оказалось, что с кроссбраузерностью у них еще беда.

Собственно вот такай вариант нужно использовать, что бы сработало везде: 

1
2
3
4
5
6
7
8
9
10
11
12
 
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: #636363;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #636363;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #636363;
}
input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #636363;
}

Внимание! На данный момент правила нужно писать отдельно, иначе не везде будут работать.
Т.е. вот так писать не нужно:

1
2
3
4
5
6
 
input::-webkit-input-placeholder,
input:-moz-placeholder,
input::-moz-placeholder,
input:-ms-input-placeholder {
    color: #636363;
}

Категории: HTML, CSS
Яндекс.Метрика