Задать вопрос
DmitrySheklein
@DmitrySheklein

Как реализовать input с 2мя рамками?

Вопрос к гуру верстки и знатокам кроссбраузерности.
Возможно ли реализовать такое отображение input, которое нарисовал дизайнер?
В chromeподобных браузерах получилось сделать через outline, но в safari и mozilla появляется стандартная синяя обводка. Как быть?
Код на codepen

619e3d20ca132353651497.png
619e3d893743c931662452.png
  • Вопрос задан
  • 79 просмотров
Подписаться 1 Простой 4 комментария
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Профессиональная вёрстка на HTML и CSS
    3 месяца
    Далее
  • Skillbox
    Веб-вёрстка 3.0
    3 месяца
    Далее
  • OTUS
    HTML/CSS
    3 месяца
    Далее
Пригласить эксперта
Ответы на вопрос 1
@interneterrorhehe
HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title></title>
</head>
<body>
<form>

<input placeholder="Нет значения">
</input>

</form>
</body>
</html>


CSS:

form{
border: 5px solid blue;
width: 548px;

}

input{
	width: 500px;
	padding: 20px;
	border: 4px solid red;
}


619e47878ff3d488974160.png (не нажал на поле)

619e47fbb2132405038153.png (нажал на поле)
Ответ написан
Ваш ответ на вопрос

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

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
FoodSoul Калининград
от 180 000 до 250 000 ₽
Data Directs Тель-Авив
от 350 000 ₽