Несколько полезных CSS-трюков

[rWeb]

Для корректной работы placeholder необходимо разделить селекторы для каждого браузера. В противном случае невалидный селектор группы приводит к невалидности всей группы. Также стоит обратить внимание, что псевдокласс в Firefox использовался до 18 версии включительно, а с 19 версии используется псевдоэлемент. Дополнительно можно добавить поддержку IE 10+. Итого:

/* Webkit */
input:focus::-webkit-input-placeholder {
   color: transparent !important;
}

/* Mozilla Firefox 4 - 18 */
input:focus:-moz-placeholder {
    color: transparent !important;
}

/* Mozilla Firefox 19+ */
input:focus::-moz-placeholder {
    color: transparent !important;
}

/* IE 10+ */
input:focus:-ms-input-placeholder {
    color: transparent !important;
}

[Zavtramen]

Спасибо, учту. Изначально в коде они у нас разнесены, а тут я поторопился и списал их одной строчкой, чтобы короче было.

[yeti]

а !important зачем?

[Zavtramen]

Все дело в том, что нам нужна была едва заметная обводка, потому в коде и оставил rgba(0, 0, 0, 0.05).

[dbanet]

Хорошо, но хотелось бы больше. Ладно, в любом случае — в избранное.

[aTei]

> :hover в мобильных устройствах
> оскольку мы используем Modernizr и LESS, у нас из коробки есть классы touch и no-touch

Последние версии настольного Firefox получают класс touch. Браузеры в Win8 возможно тоже (из-за двух видов ввода).

[Mew]

Убирать плейсхолдер сразу это зло