Как использовать CSS для стилизации полей ввода?

CSS input используется для стилизации форм веб-страницы. Input является одним из самых распространенных элементов формы, он позволяет пользователю вводить текст, пароли, адреса электронной почты и другую информацию.

Основные свойства CSS для стилизации input:

1. background: устанавливает фоновый цвет для input

css
input {
  background: #f3f3f3;
}

2. border: устанавливает границу для input

css
input {
  border: 1px solid #ccc;
}

3. color: устанавливает цвет текста для input

css
input {
  color: #333;
}

4. font-size: устанавливает размер шрифта для input

css
input {
  font-size: 16px;
}

5. padding: устанавливает отступы внутри input

css
input {
  padding: 10px;
}

6. width: устанавливает ширину input

css
input {
  width: 100%;
}

7. height: устанавливает высоту input

css
input {
  height: 40px;
}

8. outline: устанавливает внешнюю границу для input

css
input {
  outline: none;
}

Также можно использовать псевдоклассы, чтобы стилизовать input в разных состояниях, например, :focus для активного input или :hover для наведения курсора мыши на input.

Пример:

css
input {
  background: #f3f3f3;
  border: 1px solid #ccc;
  color: #333;
  font-size: 16px;
  padding: 10px;
  width: 100%;
  height: 40px;
  outline: none;
}
input:focus {
  border: 1px solid #007bff;
}

В данном примере при наведении курсора на input или при его активации (фокусе) цвет границы меняется на синий.

Также можно использовать CSS для изменения и других атрибутов input, например, для изменения типа input с текстового на парольный с помощью свойства type:

html

css
input[type="password"] {
  background: #f3f3f3;
  border: 1px solid #ccc;
  color: #333;
  font-size: 16px;
  padding: 10px;
  width: 100%;
  height: 40px;
  outline: none;
}

В данном примере стилизован парольный input.

Также можно добавлять другие свойства для стилизации input, например, border-radius для закругления углов или box-shadow для добавления тени.

В целом, CSS input позволяет создавать эстетически приятные и функциональные формы на веб-страницах.