Css this field is required

:required

The :required pseudo class selector in CSS allows authors to select and style any matched element with the required attribute. Forms can easily indicate which fields must have valid data before the form can be submitted, but allows the user to avoid the wait incurred by having the server be the sole validator of the user’s input. Let’s say we have an input with an attribute of type=»name» and make it a required input using the required boolean attribute 1 :

/* style all elements with a required attribute */ :required

We can also style required form fields using simple selectors as well as chaining together additional pseudo class selectors:

/* style all input elements with a required attribute */ input:required < box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); >/** * style input elements that have a required * attribute and a focus state */ input:required:focus < border: 1px solid red; outline: none; >/** * style input elements that have a required * attribute and a hover state */ input:required:hover

The required attribute is treated as a boolean meaning it does not require a value. Simply having required on an element lets the browser know this attribute exists and the corresponding input is in fact a required field. Although, according to the W3C spec, the required attribute also works with an empty value or a value with the attributes name.

The required attribute also requests for the browser to use native callouts such as the bubble message depicted from the demo. For those inputs not styled using :required , authors may also customize non-required elements using the :optional pseudo class selector along with :invalid and :valid which are triggered when a form field’s data requirements are met. Form validation can also be complimented alongside required with the pattern attribute to help filter data depending on the input’s type attribute. Patterns can be written as a regular expression or a string. In the example below we’re using a regular expression to match the syntax for an e-mail address.

~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`<|>~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" required>

The :required attribute works on radio buttons. If you put required on one radio button (or all), that particular group of radio buttons will be required. On checkboxes, makes each individual checkbox required (to be checked).

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

1 Boolean Attributes: A number of attributes in HTML5 are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value. If the attribute is present, its value must either be the empty string or a value that is a case-insensitive match for the attribute’s canonical name, with no leading or trailing whitespace.

Источник

:required

The :required CSS pseudo-class represents any , , or element that has the required attribute set on it.

Try it

This pseudo-class is useful for highlighting fields that must have valid data before a form can be submitted.

Note: The :optional pseudo-class selects optional form fields.

Syntax

Examples

The required field has a red border

HTML

form> div class="field"> label for="url_input">Enter a URL:label> input type="url" id="url_input" /> div> div class="field"> label for="email_input">Enter an email address:label> input type="email" id="email_input" required /> div> form> 

CSS

label  display: block; margin: 1px; padding: 1px; > .field  margin: 1px; padding: 1px; > input:required  border-color: #800000; border-width: 3px; > input:required:invalid  border-color: #c00000; > 

Result

Accessibility concerns

Mandatory s should have the required attribute applied to them. This will ensure that people navigating with the aid of assistive technology such as a screen reader will be able to understand which inputs need valid content to ensure a successful submission.

If the form also contains optional inputs, required inputs should be indicated visually using a treatment that does not rely solely on color to convey meaning. Typically, descriptive text and/or an icon are used.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Mar 12, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

Styling Form Inputs in CSS With :required, :optional, :valid and :invalid

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Introduction

When it comes to validating the content of input fields on the frontend, things are much easier now than they they used to be. We can use the :required , :optional , :valid and :invalid pseudo-classes coupled with HTML5 form validation attributes like required or pattern to create very visually engaging results. These pseudo-classes work for input , textarea and select elements.

Input pseudo-classes

form action="#"> input type="text" placeholder="First Name" required> input type="email" placeholder="Email" required> input type="text" placeholder="Nickname"> input type="text" placeholder="Favorite pizza topping"> form> 

input  border: 2px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; transition: background-color 0.5s ease-out; > input:optional  border-color: gray; > input:required  border-color: black; > input:invalid  border-color: red; > 

Here’s the result:

See the Pen vYGeLYw by alligatorio (@alligatorio) on CodePen. In the demo above,

Adding the :focus pseudo-class

Let’s make things even more interesting by also styling according to the focus state and add a background image and color depending on the validity state and only when the input is in focus. We’ll use the same HTML markup. Here’s our updated CSS:

input  border: 2px solid; border-radius: 4px; font-size: 1rem; margin: 0.25rem; min-width: 125px; padding: 0.5rem; transition: border-color 0.5s ease-out; > input:optional  border-color: gray; > input:required:valid  border-color: green; > input:invalid  border-color: red; > input:required:focus:valid  background: url("https://assets.digitalocean.com/labs/icons/hand-thumbs-up.svg") no-repeat 95% 50% lightgreen; background-size: 25px; > input:focus:invalid  background: url("https://assets.digitalocean.com/labs/icons/exclamation-triangle-fill.svg") no-repeat 95% 50% lightsalmon; background-size: 25px; > 

1. input:required:valid applies a success state only to required inputs. Because technically, optional inputs are always valid.
2. input:focus:valid’ and ‘input:focus:invalid apply to inputs only when they are focused.

And here’s the result:

You could be tempted to add content instead using ::before or ::after on the input, but unfortunately that’s not possible on input elements. One trick would be to have a sibling span element that has content added depending on the validity of the input. Something like this:

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Источник