Задать вопрос
@egrom92
Верстаю
css

Реально както сократить код?

Реально ли както эту записюльку сократить? я про хвер и про фокус.

.form__input {
	height: 36px;
	width: 268px;
	font-size: 13px;
	border: none;
	border-bottom: 1px solid #bababa;
	outline:none;
	margin-bottom: 15px;
}

.form__reg_placeholder::-webkit-input-placeholder {
	color:#acacac;
}

.form__reg_placeholder::-ms-input-placeholder {
	color:#acacac;
}

.form__reg_placeholder::-ms-input-placeholder {
	color:#acacac;
}

.form__reg_placeholder::placeholder {
	color:#acacac;
}

.form__input:hover {
	border-bottom: 1px solid #000;
}

.form__reg_placeholder:hover::-webkit-input-placeholder {
	color:#000;
}

.form__reg_placeholder:hover::-ms-input-placeholder {
	color:#000;
}

.form__reg_placeholder:hover::-ms-input-placeholder {
	color:#000;
}

.form__reg_placeholder:hover::placeholder {
	color:#000;
}

.form__input:focus {
	border-bottom: 1px solid #000;
}

.form__reg_placeholder:focus::-webkit-input-placeholder {
	color:#000;
}

.form__reg_placeholder:focus::-ms-input-placeholder {
	color:#000;
}

.form__reg_placeholder:focus::-ms-input-placeholder {
	color:#000;
}

.form__reg_placeholder:focus::placeholder {
	color:#000;
}
  • Вопрос задан
  • 69 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
-ms-input-placeholder - такого не существует. Также вы забыли -moz-placeholder.
Я не думаю, что это можно сократить. Группировать нельзя, т.к. если один из селекторов группы не поддерживается браузером, весь блок будет проигнорирован. Если вы используете автопрефиксер, то вас не должно заботить ручная расстановка префиксов.
UPD: а, ну можно скрупировать focus и hover для каждого браузера
.form__reg_placeholder:hover::-webkit-input-placeholder,
.form__reg_placeholder:focus::-webkit-input-placeholder {
  color:#000;
}


Типа вот так
.form__input {
  height: 36px;
  width: 268px;
  font-size: 13px;
  border: none;
  border-bottom: 1px solid #bababa;
  outline:none;
  margin-bottom: 15px;
}

.form__reg_placeholder::-webkit-input-placeholder {
  color:#acacac;
}

.form__reg_placeholder::-moz-placeholder {
  color:#acacac;
}
 
.form__reg_placeholder::placeholder {
  color:#acacac;
}

.form__input:hover,
.form__input:focus {
  border-bottom: 1px solid #000;
}

.form__reg_placeholder:hover::-webkit-input-placeholder,
.form__reg_placeholder:focus::-webkit-input-placeholder {
  color:#000;
}

.form__reg_placeholder:hover::-moz-placeholder,
.form__reg_placeholder:focus::-moz-placeholder {
  color:#000;
}

.form__reg_placeholder:hover::placeholder,
.form__reg_placeholder:focus::placeholder {
  color:#000;
}
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
irishmann
@irishmann
Научись пользоваться дебаггером
Минификация
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
React разработчик
Uptrade
от 150 000 до 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Необходимо сверстать приложение согласно макету Figma используя React
26 апр. 2024, в 22:22
1500 руб./за проект
Написать модуль подключения матрицы Sony к ПЛИС (Verilog)
26 апр. 2024, в 21:30
15000 руб./за проект
8266 f12 требуется сделать ревью и оптимизировать работу
26 апр. 2024, в 20:42
2000 руб./за проект
Ещё заказы