Меню
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP КАК СДЕЛАТЬ ПРОГРАММЫ SW3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS КИБЕРБЕЗОПАСНОСТЬ НАУКА О ДАННЫХ
     ❯   

CSS Учебник


CSS Продвинутый


CSS Отзывчивый


CSS Grid


CSS SASS


CSS Примеры


CSS Справочники



CSS Формы



Внешний вид HTML формы можно значительно улучшить с помощью CSS стиля:

Попробуйте сами »

Добавить стиль поля ввода

Используя CSS свойство width для определения ширины поля ввода:

input {
    width: 100%;
}
Попробуйте сами »

Пример относится ко всем элементам <input>. Если вы хотите только установить стиль определенного типа ввода, можно использовать селектор и атрибуты:

  • input[type=text] - будут выбраны только текстовые поля
  • input[type=password] - будет выбирано только поля пароля
  • input[type=number] - будут выбраны только числовые поля
  • и т.д...


Добавить поле ввода

Использовать CSS свойство padding для добавления пространства внутри текстового поля.

Совет: Если у вас есть много вводов друг за другом, Вы можете также добавить margin, чтобы было больше места за пределами:

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
}
Попробуйте сами »

Обратите внимание, что мы установили свойство box-sizing к border-box. Это гарантирует, что заполнение в конечном итоге границы включены в общюю ширину и высоту элементов.
Подробнее о свойстве box-sizing в главе CSS Стили Бокс.


Добавить границы поля ввода

Использовать CSS свойство border для изменения размера и цвета границы, и CSS свойство border-radius для добавления закругленных углов:

input[type=text] {
    border: 2px solid red;
    border-radius: 4px;
}
Попробуйте сами »

Если вам нужна только нижняя граница, используйте CSS свойство border-bottom:

input[type=text] {
    border: none;
    border-bottom: 2px solid red;
}
Попробуйте сами »

Добавить цвет поля ввода

Использовать CSS свойство background-color для цвета фона ввода, CSS свойство color для добавления изменение цвета текста:

input[type=text] {
    background-color: #3CBC8D;
    color: white;
}
Попробуйте сами »

Добавить фокус поля ввода

По умолчанию некоторые браузеры добавляют синий контур вокруг ввода, когда он получает фокус (щелчок мышью). Это поведение можно удалить, добавив outline: none; в input.

Использовать CSS селектор :focus, чтобы поле ввода, получил фокус:

input[type=text]:focus {
    background-color: lightblue;
}
Попробуйте сами »
input[type=text]:focus {
    border: 3px solid #555;
}
Попробуйте сами »

Добавить иконку поля ввода

Если вы хотите установить иконку внутри ввода, используйте CSS свойство background-image и расположите его в CSS свойстве background-position. Также обратите внимание, что мы добавили padding-left для резервирования места иконки:

input[type=text] {
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding-left: 40px;
}
Попробуйте сами »

Добавить трансформацию поиска поля ввода

В данном примере мы используем CSS свойство transition оживить ширину поискового ввода, когда он получает фокус. Вы узнаете больше о свойствах transition позже, в нашей главе CSS Трансформация.

input[type=text] {
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
Попробуйте сами »

Добавить стиль textarea

Совет: Использовать CSS свойство resize, чтобы предотвратить изменение размера текстовой области (отключите "захват" в правом нижнем углу):

textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}
Попробуйте сами »

Добавить стиль select поля ввода

select {
    width: 100%;
    padding: 16px 20px;
    border: none;
    border-radius: 4px;
    background-color: #f1f1f1;
}
Попробуйте сами »

Кнопки поля ввода

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

/* Совет: использовать width: 100% для кнопок полной ширины */
Попробуйте сами »

Для получения дополнительной информации о том, как стилизовать кнопки с помощью CSS, прочитайте наш CSS Кнопки Учебник.


Отзывчивая форма

Измените размер окна браузера, чтобы увидеть эффект. Когда экран меньше чем 600 пикселей в ширину, сделайте два столбца стек друг к другом, а не друг на друга

Продвинутый: В следующем примере медиа запросы создать отзывчивую форму. Вы узнаете больше об этом в следующей главе.

Попробуйте сами »


×

Связаться с отделом продаж

Если вы хотите использовать услуги schoolsw3 как образовательное учреждение, команда или предприятие, отправьте нам электронное письмо:
sales@schoolsw3.com

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, отправьте нам электронное письмо:
help@schoolsw3.com

Schoolsw3 оптимизирован для обучения и подготовки. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно проверяются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего контента.
При использовании Schoolsw3 вы соглашаетесь прочитать и принять наши условия использования,
политику использования файлов cookie и конфиденциальности.

Авторское право 1999- принадлежит Refsnes Data. Все права защищены. Schoolsw3 работает на SW3.CSS.