Beautiful input html css

CSS Forms

The look of an HTML form can be greatly improved with CSS:

Styling Input Fields

Use the width property to determine the width of the input field:

Example

The example above applies to all elements. If you only want to style a specific input type, you can use attribute selectors:

• input[type=text] — will only select text fields
• input[type=password] — will only select password fields
• input[type=number] — will only select number fields
• etc..

Padded Inputs

Use the padding property to add space inside the text field.

Tip: When you have many inputs after each other, you might also want to add some margin , to add more space outside of them:

Example

Note that we have set the box-sizing property to border-box . This makes sure that the padding and eventually borders are included in the total width and height of the elements.
Read more about the box-sizing property in our CSS Box Sizing chapter.

Bordered Inputs

Use the border property to change the border size and color, and use the border-radius property to add rounded corners:

Example

If you only want a bottom border, use the border-bottom property:

Example

Colored Inputs

Use the background-color property to add a background color to the input, and the color property to change the text color:

Example

Focused Inputs

By default, some browsers will add a blue outline around the input when it gets focus (clicked on). You can remove this behavior by adding outline: none; to the input.

Use the :focus selector to do something with the input field when it gets focus:

Example

Example

Input with icon/image

If you want an icon inside the input, use the background-image property and position it with the background-position property. Also notice that we add a large left padding to reserve the space of the icon:

Example

input[type=text] <
background-color: white;
background-image: url(‘searchicon.png’);
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
>

Animated Search Input

In this example we use the CSS transition property to animate the width of the search input when it gets focus. You will learn more about the transition property later, in our CSS Transitions chapter.

Example

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

input[type=text]:focus width: 100%;
>

Styling Textareas

Tip: Use the resize property to prevent textareas from being resized (disable the «grabber» in the bottom right corner):

Example

textarea <
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
>

Styling Select Menus

Example

select <
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
>

Styling Input Buttons

Example

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

/* Tip: use width: 100% for full-width buttons */

For more information about how to style buttons with CSS, read our CSS Buttons Tutorial.

Responsive Form

Resize the browser window to see the effect. When the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other.

Advanced: The following example uses media queries to create a responsive form. You will learn more about this in a later chapter.

Aligned Form

An example of how to style labels together with inputs to create a horizontal aligned form:

Источник

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

Источник