Стилизация Textarea
Небольшой «захват» в правом нижнем углу позволяет пользователям изменять размер <textarea>, перетаскивая его; это поведение по умолчанию. Если установить свойство resize в none, захват исчезнет.
Пример
Prompt
Создайте HTML-страницу со стилизованным textarea. Textarea должно иметь ширину 100%, высоту 150px, отступ 12px 20px, box-sizing border-box, border 2px solid #ccc, border-radius 4px, фон #f8f8f8 и resize, установленное в none.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Textarea</title>
<style>
textarea {
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
</style>
</head>
<body>
<h2>Styling Textarea</h2>
<p>Use the resize property to prevent textareas from being resized:</p>
<textarea>Some text...</textarea>
</body>
</html>
Стилизация выпадающего меню
Пример
Prompt
Создайте HTML-страницу со стилизованным выпадающим меню, содержащим варианты для Australia, Canada и USA. Элемент select должен иметь ширину 100%, отступ 16px 20px, без border, border-radius 4px и цвет фона #f1f1f1.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Dropdown Menu</title>
<style>
select {
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
</style>
</head>
<body>
<h2>Styling a Dropdown Menu</h2>
<select>
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</body>
</html>
Стилизация кнопок формы
С помощью CSS можно стилизовать и кнопки формы, будь то тип «button», «submit» или «reset».
Совет: В учебнике по CSS кнопкам стилизация кнопок рассматривается подробнее.
Пример
Prompt
Создайте HTML-страницу с тремя стилизованными кнопками формы: Submit (тип submit), Reset (тип reset) и Button (тип button). Оформите все три с зелёным фоном (#04AA6D), без border, белым текстом, отступом 16px 32px, без text-decoration, margin 4px 2px и курсором pointer.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Form Buttons</title>
<style>
input[type=button], input[type=submit], input[type=reset] {
background-color: #04AA6D;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Styling Form Buttons</h2>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
<input type="button" value="Button">
</body>
</html>
CSS Адаптивная форма
Форма становится адаптивной благодаря CSS медиа-запросам. Когда ширина экрана меньше 600px, подписи и поля ввода больше не располагаются рядом друг с другом, а выстраиваются по вертикали.
Пример
Измените размер экрана и посмотрите, как реагирует макет формы.
Prompt
Создайте HTML-страницу с адаптивной формой, содержащей поля имени, фамилии и страны с подписями рядом с полями ввода. Используйте медиа-запрос так, чтобы при ширине экрана менее 600px подписи и поля ввода располагались вертикально друг над другом вместо расположения рядом.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Responsive Form</title>
<style>
* {
box-sizing: border-box;
}
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #04AA6D;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
.col-25 {
float: left;
width: 25%;
margin-top: 6px;
}
.col-75 {
float: left;
width: 75%;
margin-top: 6px;
}
.row::after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
</style>
</head>
<body>
<h2>Responsive Form</h2>
<p>Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.</p>
<div class="container">
<form action="/action_page.php">
<div class="row">
<div class="col-25">
<label for="fname">First Name</label>
</div>
<div class="col-75">
<input type="text" id="fname" name="firstname" placeholder="Your name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="lname">Last Name</label>
</div>
<div class="col-75">
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
</div>
</div>
<div class="row">
<div class="col-25">
<label for="country">Country</label>
</div>
<div class="col-75">
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
</div>
</div>
<div class="row">
<input type="submit" value="Submit">
</div>
</form>
</div>
</body>
</html>