Стилизация полей ввода формы
Большинство типов input поддерживают стилизацию через CSS, среди них текстовые поля, поля пароля, флажки, переключатели и поля выбора файлов. Стилизовать можно также метки полей ввода и кнопки формы.
Среди свойств, которые вы будете чаще всего применять к полям ввода, — width, padding, margin, border, border-radius, background-color, color и font-size.
Стилизация ширины поля ввода
Чтобы определить ширину поля ввода, задайте его свойство width.
Совет: если его не менять, текстовое поле ввода HTML имеет ширину 20 символов.
Пример
В этом примере для поля ввода задана ширина 100%:
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Width</title>
<style>
input {
width: 100%;
}
</style>
</head>
<body>
<h2>Full-width Input Field</h2>
<p>A full-width input field:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Селекторы атрибутов
Это правило действует на каждый элемент <input>. Чтобы выбрать только один тип поля ввода, используйте вместо него селекторы атрибутов:
input[type=text] - will only select text fields
input[type=password] - will only select password fields
input[type=number] - will only select number fields
etc..
Стилизация внутренних отступов поля ввода
Если текстовому полю нужно немного пространства внутри, его добавляет свойство padding.
Совет: когда поля ввода идут друг за другом, небольшой margin также может дать им дополнительное пространство снаружи.
Пример
Примечание: когда box-sizing имеет значение border-box, внутренние отступы и границы входят в общую ширину и высоту элементов. Подробнее это свойство объясняется в главе CSS Box Sizing.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Padding</title>
<style>
input[type=text] {
width: 100%;
padding: 12px;
margin: 10px 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<h2>Padded Input Fields</h2>
<p>Padded input fields with margin:</p>
<form>
<label for="fname">First Name</label>
<input type="text" id="fname" name="fname">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lname">
</form>
</body>
</html>
Стилизация границы поля ввода
Край поля определяют два свойства: border изменяет его размер и цвет, а border-radius скругляет углы.
Скруглённая граница
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Border</title>
<style>
input[type=text] {
border: 2px solid red;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Input Border</h2>
<p>A text input with a red border and rounded corners:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Только нижняя граница
Чтобы граница появилась только у нижнего края, используйте border-bottom:
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Bottom Border</title>
<style>
input[type=text] {
border: none;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<h2>Input Bottom Border Only</h2>
<p>A text input with only a bottom border:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>
Стилизация цвета фона и цвета текста поля ввода
Цвет текста поле ввода получает из свойства color, а background-color добавляет цвет позади него.
Пример
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Background Color</title>
<style>
input[type=text] {
background-color: #3CBC8D;
color: white;
}
</style>
</head>
<body>
<h2>Input Colors</h2>
<p>A text input with a green background and white text color:</p>
<form>
<label for="fname">First Name</label><br>
<input type="text" id="fname" name="fname">
</form>
</body>
</html>