Поле ввода
Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 52 из 76.
Задание
ЛегкоВ этом уроке мы улучшим внешний вид полей ввода, чтобы сделать их удобными для пользователя.
Стилизуйте поля <input>. Выполните следующие шаги:
- Сделайте их шириной 100%, чтобы они хорошо вписывались в форму.
- Добавьте padding, чтобы текст внутри не касался краев.
- Примените border мягкого цвета.
- Сделайте углы закругленными.
- Добавьте margin между полями ввода, чтобы они не располагались слишком близко друг к другу.
- Используйте box-sizing: border-box;, чтобы ширина включала внутренние отступы и границы.
Попробуйте сами
<html>
<head>
<title>Login Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form class="login-form">
<h2>Login</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
</body>
</html>
Все уроки раздела Стилизация с CSS
4Основы работы с текстом
Цвет текстаСемейство шрифтаРазмер шрифтаНасыщенность шрифтаВыравнивание текстаОформление текстаПовторение: задание №1Повторение: задание №27Блочная модель. Часть 1
Что такое блочная модель?Внутренние отступыВнешние отступыГраницыШирина и высотаИтоговое задание
Потренируйтесь самостоятельно: Песочница Web