| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 3.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Задати ширину текстового поля в пікселях через стилі.
Рішення
Ширина текстового поля, яке створюється за допомогою тега <input>, визначається стильовою властивість width, значення якого можна встановлювати в пікселях, відсотках або інших допустимих одиницях, як показано в прикладі 1.
Приклад 1. Ширина поля
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>Ширина текстового поля</title>
<style>
#user {
width: 300px; /* Ширина поля в пікселях */
}
</style>
</head>
<body>
<form method="post" action="handler.php">
<p>Введіть ваше ім'я:</p>
<p><input type="text" name="username" id="user" size="5" />
<input type="submit" name="Submit" value="Послати" /></p>
</form>
</body>
</html>
Результат цього прикладу показано нижче.
Рис. 1. Текстове поле з фіксованою шириною
В даному прикладі задана ширина поля в пікселях шляхом додавання властивості width до ідентифікатора поля user.
Зауважте, що ширина поля також визначена за допомогою атрибуту size тега <input>, але в разі застосування стилів цей параметр ігнорується.