Css all input fields

CSS Form Styling

You can style HTML forms using CSS. By that, I mean you can style the individual form fields. The HTML form element is more like a semantic element, so it does not make sense to style that.

HTML forms are covered in my two other tutorials about HTML 4 form fields and HTML 5 form fields.

Styling input Elements

The most common form field to style is the input element. Actually, since the input element can be used to create several different types of input fields, you will typically not style all input elements equally. Rather, you will style the various different input fields differently. For instance:

input[type=’text’] < border : 1px solid #cccccc; >input[type=’submit’]

This example sets a gray border around text input fields, and a green border around submit buttons.

The following sections will explain in more detail how to style the various form fields.

Text Fields

Text fields are input elements with the type attribute set to text . Here is how the HTML looks:

And here is how a text field looks when rendered in the browser (not all browsers render text fields the same):

Text Field CSS Selector

To style all text fields ( ) you need to use a combination of the element and attribute CSS selectors. Here is an example:

Text Field Borders

It is possible to set the border style of a text field. This example sets a gray border around all text fields:

Here is how that looks when applied to a text field:

For more information about styling borders, see my tutorial about CSS borders.

Text Field Background Color

You can also set the background-color of a text field. Here is an example that sets both the border and background-color of a text field:

Here is how the styled text field looks:

Text Field Width and Height

You can also set the width and height of a text field using the width and height CSS properties. Here is are a few examples:

input[type=’text’] < width: 50px; height: 10px; >input[type=’text’] < width: 100px; height: 15px; >input[type=’text’]

Here is how text fields look with these widths and heights applied:

Text Field Font

It is possible to set the font family and font size used by a text field. Here is an example:

Here is how these styles look when applied to a text field:

For more information about the font CSS properties, check out my tutorial about styling text with CSS.

Text Areas

You can style the textarea HTML element in much the same way as you can with a text field. You can style the border, background-color, width and height like this:

Here is how a textarea looks with these styles applied:

resize : none

By default the browser allows the user to resize the text area by dragging in the lower right corner of the textarea . To remove this resize handle you can set the resize CSS property to none , like this:

Here is how the textarea looks with these styles applied:

Buttons

You can style buttons used in forms too. Buttons are input elements with the type set to button or submit , or button elements. Here are some examples of how the HTML looks like for buttons:

Button CSS Selectors

You can style these three button elements using these three CSS selectors:

input[type=’button’] < >input[type=’submit’] < >button

Button Styles

You can set borders, background colors, fonts and much more on buttons. Here is an example:

Here is how these styles look when applied to a button:

Button Hover Styles

You can set styles for when the mouse is hovering over a button too. Here is an example:

Here is how the styles look when applied to a button element:

Notice how the background color and border color changes when you hover the mouse above the button.

Labels

You can also style the label element, which normally contains the label for a given input field. A common way to style label elements is to give them all the same width. That way labels and fields are displayed nicely in a two-coloumn layout. Here is a code example:

Here is how these two input fields look with these styles applied:

Notice how the labels and text fields are nicely aligned above each other. That happens because the label elements have the same width.

fieldset and legend

The fieldset and legend HTML elements are used to draw a box around a form, and write a legend in the top of the box (inside the border). Here is a code example:

 
Input Form
 First name  
Last name  
 

Here is how the code looks when rendered:

Input Form First name
Last name

You can set the border color, background color etc. of the fieldset element, just like if it was a text field. You can also set the font of the legend element as if it was a text element.

Источник

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:

Источник

How to select text input fields using CSS selector?

Selecting text input fields using CSS selectors is a powerful and crucial tool for styling and targeting the specific elements on the webpage. Text input fields are an essential part of any web form that requires users to provide input. As a web developer or designer, we may need to select text input fields using CSS selectors to apply styling to them. If we want to change the font color, background color, or add custom styles to the input fields, it is important to understand how to select them using CSS selectors.

Structure of a text input field

Before we select a text input field using CSS selectors, it is important to understand its structure. A text input field is usually represented by an HTML element with the type attribute set to «text». For example, the following HTML code creates a text input field.

This selector targets all input fields with a «type» attribute set to «text», «email», or «password». The comma between the selectors means that all the selectors will receive the same styles.

Example 1: Selecting text input fields using type attribute

In this example, we use the type attribute selector to select all text input fields in the form. The CSS styles are applied to all text input fields with the attributes type=»text», type=»email», and type=»password». The border, padding, font-size, and margin-bottom styles are applied to these input fields.

    body < text-align: center; >input[type="text"], input[type="email"], input[type="password"] 
Selecting text input fields using type attribute
 Name:  
Email:  
Password:  

Using the ID selector to select a specific text input field

We can use the ID selector to target a specific text input field. The ID selector is represented by the «#» character followed by the value of the ID attribute of the HTML element. For example, if we have an HTML element with the ID attribute set to «username», we can select it using the following CSS selector −

Example 2: Selecting text input fields using ID attribute.

In this example, we use the ID attribute selector to select three text input fields with IDs name, email and password. The CSS styles are applied to these three input fields. The border-radius, and background-color styles are applied to these input fields.

    body < text-align: center; >input[type="text"], input[type="email"],input[type="password"] < border: 2px solid lightgray; padding: 12px; font-size: 18px; margin-bottom: 15px; >#name, #email 
Selecting text input fields using ID attribute
 Name:  
Email:  
Password:  

Using the class selector to select multiple text input fields

If we have multiple text input fields with similar styling or functionality, we can use the class selector to target them. The class selector is represented by the «.» character followed by the value of the class attribute of the HTML element. For example, if we have multiple HTML elements with the class attribute set to «input-field», we can select them using the following CSS selector −

This selector targets all HTML elements with the class attribute set to «input-field».

Example 3: Selecting text input fields using class attribute

In this example, we use the Class attribute selector to select three text input fields with the class name, email, and password. The CSS styles are applied to these three input fields. The border-radius, and background-color styles are applied to these input fields.

    body < text-align: center; >input[type="text"], input[type="email"], input[type="password"] < border: 2px solid lightgray; padding: 12px; font-size: 18px; margin-bottom: 15px; >.password, .search 
Selecting text input fields using ID attribute
 Name:  
Email:  
Password:  

Conclusion

Selecting text input fields using CSS selectors is a simple process once we understand the structure of a text input field and the different CSS selectors available. By using the appropriate CSS selector, we can easily target and style text input fields to enhance the user experience of the web forms.

Источник