Красивая стилизация input css

Стилизация форм

При помощи CSS можно качественно улучшить внешний вид HTML форм:

Стилизация полей ввода

Для определения ширины поля ввода можно использовать свойство width :

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

• input[type=text] — выберет только текстовые поля ввода
• input[type=password] — выберет только поля ввода паролей
• input[type=number] — выберет только цифровые поля ввода
• и так далее..

Промежутки у полей ввода

Чтобы добавить дополнительные промежутки внутри поля ввода, используйте свойство padding .

Когда в форме много полей ввода, идущих друг за другом, также может потребоваться использовать свойство margin , чтобы добавить дополнительные отступы снаружи поля ввода:

Обратите внимание, что мы установили для свойства box-sizing значение border-box . Это сделано для того, чтобы промежутки и рамки включались в ширину и высоту элементов.

Поля ввода с рамкой

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

Если вы хотите, чтобы рамка была только снизу поля ввода, то используйте свойство border-bottom :

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

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

Поля ввода в фокусе

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

Чтобы определить какой-нибудь свой стиль для поля ввода, находящегося в фокусе, используйте псевдокласс :focus :

Поле ввода с иконкой/изображением

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

Анимированное поле ввода

В следующем примере мы используем свойство transition , чтобы добавить анимацию на изменение ширины поля ввода, когда оно получает фокус:

 input[type=text] < transition: width 0.4s ease-in-out; >input[type=text]:focus

Стилизация области ввода

Чтобы запретить изменять размер области текстового ввода (отключить «захват» в левом нижнем углу), используйте свойство resize :

Стилизация меню выбора

Стилизация кнопок ввода

 input[type=button], input[type=submit], input[type=reset]

Чтобы ширина кнопки была во весь экран, используйте width: 100%; .

Источник

CSS Input Text

The CSS Input Text collection on features a variety of creative and stylish designs for text input fields. Each design is built using CSS and HTML, making them easy to implement on any project. This collection also includes placeholders, float labels, and other input text code examples.

The collection was last updated in June 2023 with 3 new items, so you can be sure you’re getting the latest and greatest designs. Whether you’re looking for a basic text input field or a more unique and engaging design, this collection has something for everyone.

Related Articles

Author

Links

Made with

About a code

Custom Styled Inputs

This is a example with various input fields. It includes a text input field, a checkbox, two radio buttons, a color picker, a range slider, a button, a file upload field with a cloud icon, a date picker, and a number input field.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Editable Letter Board

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Vars Styling

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Combobox

A fixed list combo box is when a user can type a certain string, and there is a list of strings that is designed to help the user arrive at a value. Try it out!

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Pure CSS Authentication

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Input with gradient-border

The background animation is a combination of two linear gradients and an SVG image. The linear gradients are set to move from left to right using the keyframes animation. The SVG image is a pattern of circles and lines. The input field have a gradient background and a border radius. The label for the input field is styled to be uppercase and has a cursor pointer. The form is responsive and has a maximum width of 20em .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

3D Textbox

3D textbox form input box. It uses transform: rotate for the sides and for the overall rotation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Input Text

Input text material with gradient.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Input Group

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Material Input Text Fields

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Jumping Input Text

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Form Label Show After Input Text

Form label show after input text only CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Author

Links

Made with

About a code

Notify Me

Form validation using HTML required and pattern attributes together with CSS :required and :valid selectors.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Elastic Validation

Compatible browsers: Chrome, Opera, Safari

Author

Links

Made with

About the code

input:not(:placeholder-shown)

It looks kinda similar to the text inputs of the framework Materialize.

Author

Links

Made with

About the code

Form Input Design

Form input designs with hover and focus.

Author

Links

Made with

About the code

Input Field Gradient Border Focus Fun

A gradient border on an input field that feathers out when focussed.

Author

Links

Made with

About a code

CSS Input Focused Animation

The CSS Input Focused Animation is a sleek and modern design that adds a touch of interactivity to a simple input field. The code features a field with an input type of text and a placeholder that reads «What’s your name?». The input field is styled with a transition property that animates the padding when the input field is focused. When the user clicks on the input field, the padding at the bottom of the field increases, giving the illusion of the field expanding. Overall, the CSS Input Focused Animation is a simple yet effective way to add a touch of interactivity to a basic input field. The design is clean and modern, making it a great addition to any website or application.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

CSS Only Floated Labels

A CSS only approach to the floated labels UI pattern.

Author

Links

Made with

About the code

CSS Fields

Fields with CSS custom properties.

Author

Links

Made with

About a code

Input Field With Underline Under Each Character

Try deleting and writing something else in the input field. It uses the ch unit whose width is the width of the 0 character. It also assumes the font in the input field is a monospace one so that all characters have the same width. So the width for every character is always 1ch . The gap between the characters is taken to be .5ch . This is the value we set for letter-spacing . The width of the input is the number of characters times the sum between the letter width ( 1ch ) and the gap width ( .5ch ). So that’s 7*(1ch + .5ch) = 7*1.5ch = 10.5ch . We remove the actual border of the input and we set a fake one using a repeating-linear-gradient . The dash (dimgrey) goes from 0 to 1ch and the gap ( transparent ) starts immediately after the dash and goes to 1.5ch . It’s attached to the left and the bottom of the input — this is the background-position component ( 0% horizontally and 100% vertically). It spreads across the entire input horizontally ( 100% in the ideal case, the input width minus the gap to take care of rendering issue in Chrome and Firefox) and is 2px tall — this is the background-size component of the background .

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник