jQuery селектор :input

Определение и применение

jQuery селектор :input выбирает все элементы <input> (пользовательское поле для ввода информации), <textarea> (поле формы для создания области многострочного ввода), <select> (раскрывающийся (выпадающий) список) и <button> (используется для размещения кнопки).

jQuery синтаксис:

JavaScript

$(":input")

Добавлен в версии jQuery

1.0

Селектор в CSS

Это селектор jQuery, он не является частью спецификации CSS.

Пример использования

Селектор :input — пример 1

Нажмите ▶. Используйте кнопки в результате и наблюдайте изменения. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<form>
  <select required="">
    <!-- указываем, что элемент раскрывающегося списка должен быть выбран перед отправкой формы -->
    <option></option>
    <option>М</option>
    <option>Ж</option>
  </select>
  <input type="text" placeholder="Ваше имя" /><br /><br />
  <!-- однострочное текстовое поле -->
  <textarea placeholder="О себе"></textarea><br />
  <!-- область многострочного ввода-->
  <button>Отправить</button>
  <!-- кнопка -->
</form>

main.js

JavaScript

$(document).ready(function () {
    $(':input').css('border', '1px solid orange') // выбираем все элементы <input>, <textarea>, <select> и <button> в документе
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием селектора :input мы выбрали и стилизовали все элементы <input>, <textarea>, <select> и <button> в документе.