Формы CSS - httpdoc.ru

CSS-формы

Ширина поля ввода

Ширина input поля может быть задана width свойством CSS . Это также может быть дано в pixels или в percent стоимости.

Посмотрите на пример ниже в редакторе try-it и внесите некоторые изменения в процентные значения, чтобы увидеть эффекты:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Form Width </title> 
  <meta charset="UTF-8"> 
<style> 
input {
  width: 100%;
}
</style>
</head>
<body>
	
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">First Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

Выход

CSS Form Width

Заполнение поля ввода

Заполнение input поля создает пространство между содержимым и границами. Это может быть задано padding свойством CSS . Его значение также может быть выражено in pixels или in percent .

Посмотрите на пример ниже в редакторе try-it и внесите некоторые изменения в процентные значения, чтобы увидеть эффекты:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Form Padding </title> 
  <meta charset="UTF-8"> 
<style> 
input[type=text] {
  width: 100%;
  padding: 10px 15px;
  margin: 8px 0;
  box-sizing: border-box;
}
</style>
</head>
<body>

<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>

Выход

CSS Form Padding

Цвет границы поля ввода

Свойство CSS border используется для задания границы и цвета поля ввода. В приведенном ниже примере используется border-radius свойство, которое создает кривые в вершинах поля ввода. Синтаксис дает цвет границы: border:width style color; . Посмотрите на пример ниже и разберитесь в синтаксисе:

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Form Padding </title> 
  <meta charset="UTF-8"> 
<style> 
input[type=text] {
  width: 100%;
  padding: 10px 15px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 2px solid green;
  border-radius: 4px;
}
</style>
</head>
<body>

<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>

Выход

CSS Form Padding

Цвет фона поля ввода

background-color Свойство используется , чтобы добавить цвет фона на вход.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Form background color </title> 
  <meta charset="UTF-8"> 
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  border: 1px solid red;
  background-color: #3CBC8D;
  color: white;
}
</style>
</head>
<body>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Snow">
</form>

</body>
</html>

Выход

CSS Form background color

Сфокусированные входы

:focus Селектор используется для изменения CSS поля ввода , когда он получает фокус. Посмотрите ниже, как для него определен внутренний CSS.

Пример
<!DOCTYPE html>
<html lang="en">
<head>
  <title> CSS Form Focus </title> 
  <meta charset="UTF-8"> 
<style> 
input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

input[type=text]:focus {
  border: 3px solid blue;
}
</style>
</head>
<body>

<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="John">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Snow">
</form>

</body>
</html>

Выход

CSS Form Focus