CSS Input Selectors

The selector '::placeholder'

The "::placeholder" function is used to manipulate an input's placeholder:

Let's you customize input placeholders.

'::disabled' Selector

For indicating if the input is disabled:

Idea: a registration system can add the "disabled" attribute to the inpu, which then the css selector looks what to do.

'::enabled' Selector

The opposite of '::disabled' selector. Its not needed to put explicitly the "enabled" attribute on an input, since the selector understands that its enabled if it doesn't have the "disabled" attribute:

Style as much as needed when somehing is enabled.

':required' Selector

Targets fields with "required" attributes:

Good for form validations - if a required input is left empty, this CSS style gets applied to the input.

':valid' Selector

This detects when the input's requirements filled browser validations:

If the info is right, the input's "valid" selector applies.

':invalid' Selector

Activated when an user didn't put the right details into the input:

Here the email input's borders turn colored red if the user's typing doesn't meet the validation.

':focus' Selector

When user selects an input, the ":focus" system gets activated:

In this example, the input's border turn blue - ideal for stylized/branded websites.

':focus-visible'

This is just like the ":focus" selector, but now with more accessibility:

Tells users with disabilities, that focus is now enabled on the input - great for variety user-friendly applications.

':checkbox'

If the input is a checkbox and gets checked, this selector actiavtes:

Here we use the '+' sign to target the label element to turn green when the checkbox is checked.

':indeterminate'

This is a function that only works if you include JavaScript for it. Its made to determine if the checkbox has been ever interacted:

If the checkbox hasn't been interacted before, the ":indeterminate" selector holds the styling until the user does something with the input.

The ':read-only' and ':read-write' Functions

':read-only' checks if the input has "readonly" attribute and 'read-write' checks if the input is writable:

Since the second input is not a read-only element, the "read-write" selector executes, detecting that it is also writable.

':in-range' and ':out-of-range' Selectors

They both combined determine, how much is the number minimum and maximum amount that can be typed into input:

This feature is ideal for a shopping cart system or a game.

':placeholder-shown'

This is a feature, that watches if the input's placeholder has no user-put text inside it:

The instance's placeholder is in yellow background as long as there are not text typed by user.

'::-webkit-autofill'

The reason the autofill selector is used with WebKit, is that more browser support this version. This function overall detects if you let an input be autocompleted:

Background turns greenish if you let the input be autocompleted - the input let's you choose text based on saved texts you have typed before.