Css style all form elements

Styling form controls

In this module you learn how to style form controls, and how to match your other site styles.

Styling HTML form controls can be a challenge, but you should still use built-in elements wherever possible. Elements such as &LTinput> and &LTbutton> are widely supported across browsers and platforms, and have built-in features that enhance usability and accessibility, which you don’t need to implement yourself. Using a &LTdiv> instead doesn’t provide these benefits.

Help users select an option #

The &LTselect> element #

The default styles of a &LTselect> element don’t look great, and the appearance is inconsistent between browsers.

You can also use an &LTinput> in combination with the &LTdatalist> element. This gives you a combination of a text field and a list of &LToption> elements. You can see examples of &LTdatalist> here.

First, let’s change the arrows.

select  
-moz-appearance: none; 
-webkit-appearance: none; 
appearance: none; 
background-color: #fff; 
background-image: url(arrow.png); 
background-repeat: no-repeat; 
background-position: right .7em top 50%, 0 0; 
background-size: .65em auto;
>

To remove the default arrows of a &LTselect> element, use the CSS appearance property. To show the arrow of your choice, define the arrow as a background .

To ensure the best cross-browser compatibility, you must also include the prefixed versions of appearance : -moz-appearance and -webkit-appearance . Learn more about vendor prefixes.

You should also change the font-size to at least 1rem (which for most browsers has a default value of 16px) for your &LTselect> element. Doing so will prevent a page zoom on iOS Safari when the form control is focused.

You can, of course, also change the element colors to match your brand colors. After adding some more styles for spacing, :hover , and :focus , the appearance of the &LTselect> element is now consistent between browsers.

See this in the following demo from Styling a Select Like It’s 2019

What about the &LToption> element? The &LToption> element is a so-called replaced element whose representation is outside the scope of CSS. As of this writing, you can’t style the &LToption> element.

There is an ongoing proposal to allow web developers to style and extend built-in web UI controls, including &LTselect> and &LToption> elements. This would make it easier to style form controls in the future. Learn more about Open UI.

Checkboxes and Radio buttons #

The appearance of &LTinput type=»checkbox»> and &LTinput type=»radio»> varies across browsers.

Open the demo on various browsers to see the difference. Let’s see how to make sure that checkboxes and radio buttons match your brand and look the same cross-browser.

In the past, developers could not style &LTinput type=»checkbox»> and &LTinput type=»radio»> controls directly. Checkboxes and radio buttons can be styled via their pseudo elements, now. Or the following replacement technique can be used to create custom styles for these elements.

First, hide the default checkbox and radio button visually.

input[type="radio"],
input[type="checkbox"]  
position: absolute; 
opacity: 0;
>

It’s important to use position: absolute in combination with opacity: 0 instead of display: none or visibility: hidden so that the controls are only visually hidden. This will ensure they are still exposed by the browser’s accessibility tree. Note that further styling may be needed to ensure that the visually hidden form controls remain positioned «on top» of their replacement elements. Doing so will help ensure that hovering over one of these elements, when a screen reader is on, or when using touch devices with screen readers enabled, the visually hidden controls will be discoverable if exploring by touch, and the screen reader’s visible focus indicator will generally appear in the location the controls are rendered on screen.

To show your custom checkboxes and radio buttons, you have different options. You use the ::before CSS pseudo-element and the CSS background property, or use inline SVG images.

input[type="radio"] + label::before  
content: ""; 
width: 1em; 
height: 1em; 
border: 1px solid black; 
display: inline-block; 
border-radius: 50%; 
margin-inline-end: 0.5em;
>

input[type="radio"]:checked + label::before  
background: black;
>

Styled form controls must be easy to understand and use. People are used to a checkbox that looks like a checkbox, so make sure when you style a form control that users still understand how to use it.

There are a lot of possibilities with CSS to ensure checkboxes and radio buttons match your brand styles.

How to use your site’s colors for form controls #

Do you want to bring your site styles to form controls with one line of code? You can use the accent-color CSS property to achieve this.

checkbox  
accent-color: orange;
>

As of this writing, only Chrome, Firefox and Edge support accent-color . To ensure cross-browser compatibility, you might want to use workarounds until accent-color is supported in all platforms.

How can you remove platform-native styling of form controls?

Using revert: all; . Using appearance: none; . Using appearance: revert; . Using revert: appearance; .

Источник

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:

Источник