CSS Form Control Styling

MDN The field-sizing CSS property enables you to control the sizing behavior of elements that are given a default preferred size, such as form control elements. This property enables you to override the default sizing behavior, allowing form controls to adjust in size to fit their contents.

body {
  box-sizing: border-box;
  padding: 20px;
}

div {
  margin-bottom: 20px;
  display: flex;
}

input,
textarea {
  field-sizing: content;
  min-width: 50px;
  max-width: 350px;
}

label {
  width: 150px;
  margin-right: 20px;
  text-align: right;
}

<div>
  <label for="name">Enter name:</label>
  <input type="text" id="name" />
</div>
<div>
  <label for="email">Enter email:</label>
  <input type="email" id="email" placeholder="e.g. a@b.com" />
</div>
<div>
  <label for="tel">Enter telephone:</label>
  <input type="tel" id="tel" maxlength="15" />
</div>
<div>
  <label for="comment">Enter comment:</label>
  <textarea id="comment">This is a comment.</textarea>
</div>

fixed | content

Specification ↗ MDN reference ↗

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

auto | none

Specification ↗

No prose in the spec's definition and no MDN page yet: the spec link below is the only description.

auto | left-to-right | right-to-left | top-to-bottom | bottom-to-top

Specification ↗

Spec The ::checkmark pseudo-element represents an indicator of whether the item is checked, and is present on checkboxes, radios, and option elements.

MDN The ::checkmark CSS pseudo-element targets the checkmark placed inside the currently-selected <option> element of a customizable select element. It can be used to provide a visual indication of which option is selected.

option::checkmark {
  color: orange;
  font-size: 1.5rem;
}

select,
::picker(select) {
  appearance: base-select;
  width: 200px;
}

select {
  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
}

::picker(select) {
  border: none;
}

option {
  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
}

option:first-of-type {
  border-radius: 8px 8px 0 0;
}

option:last-of-type {
  border-radius: 0 0 8px 8px;
}

option:nth-of-type(odd) {
  background: white;
}

option:not(option:last-of-type) {
  border-bottom: none;
}

<label for="pet-select">
  Select pet:
</label>
<br />
<select id="pet-select">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="chicken">
    Chicken
  </option>
</select>

::checkmark

Specification ↗ MDN reference ↗

Spec The ::clear-icon pseudo-element represents the portion of the input that allows the user to clear the input when clicked if provided by the user agent. With appearance: textfield, the user agent must not generate this part.

::clear-icon

Specification ↗

Spec The ::color-swatch pseudo-element represents the portion of the control that displays the chosen color value.

::color-swatch

Specification ↗

Spec The ::field-component pseudo-element represents the portions of the control that contain the date/time component values.

::field-component

Specification ↗

Spec The ::field-content pseudo-element represents the portion of the input that contains the editable text.

::field-content

Specification ↗

Spec The ::field-separator pseudo-element represents the portions of the control that separate the date/time component values if the user agent provides those portions.

::field-separator

Specification ↗

Spec The ::file-selector-button pseudo-element represents the button used to open a file picker, if the UA renders such a button.

MDN The ::file-selector-button CSS pseudo-element represents the button of an <input> of type="file".

input {
  margin-top: 1rem;
}

input::file-selector-button {
  font-weight: bold;
  color: dodgerblue;
  padding: 0.5em;
  border: thin solid grey;
  border-radius: 3px;
}

<label for="avatar">Choose a profile picture:</label><br />

<input id="avatar" type="file" name="avatar" accept="image/png, image/jpeg" />

::file-selector-button

Specification ↗ MDN reference ↗

Spec The ::picker-icon pseudo-element represents the part of the control that represents the icon denoting the presence of the picker. It is only generated when the originating element has basic appearance and if it opens a picker. It is a fully styleable pseudo-element and inherits from its originating element.

MDN The ::picker-icon CSS pseudo-element targets the picker icon inside form controls that have an icon associated with them. In the case of a customizable select element, it selects the arrow icon shown on the <select> element that points down when it is closed.

::picker-icon

Specification ↗ MDN reference ↗

Spec The ::picker() pseudo-element represents the part of the form control that pops out of the page.

MDN The ::picker() CSS pseudo-element targets the picker part of an element, for example the drop-down picker of a customizable select element.

::picker( <form-control-identifier>+ )

Specification ↗ MDN reference ↗

Spec The ::placeholder pseudo-element represents the portion of the input that contains the placeholder text.

MDN The ::placeholder CSS pseudo-element represents the placeholder text in an <input> or <textarea> element.

input {
  margin-top: 0.5rem;
}

input::placeholder {
  font-weight: bold;
  opacity: 0.5;
  color: red;
}

<label for="first-name">Your phone number:</label><br />

<input
  id="first-name"
  type="tel"
  name="phone"
  minlength="9"
  maxlength="9"
  placeholder="It must be 9 digits" />

::placeholder

Specification ↗ MDN reference ↗

Spec The ::reveal-icon pseudo-element represents the portion of the input that allows the user to temporarily disable obscuring of sensitive text input when clicked if provided by the user agent. User agents providing ::reveal-icon may choose to remove it in some circumstances to help protect sensitive text input from being revealed unintentionally.

::reveal-icon

Specification ↗

Spec The ::slider-fill pseudo-element represents the portion containing the progressed portion of the control. When the progress of control is indeterminate (like with <progress>), the user agent must give this portion an inline-size of zero.

::slider-fill

Specification ↗

Spec The ::slider-thumb pseudo-element represents the portion that allows the user to adjust the progress of the control.

::slider-thumb

Specification ↗

Spec The ::slider-track pseudo-element represents the portion containing both the progressed and unprogressed portions of the control.

::slider-track

Specification ↗

Spec The ::step-control pseudo-element represents the portion of a number input that contains the up and down buttons.

::step-control

Specification ↗

Spec The ::step-down pseudo-element represents the button that decrements the value inside a number input when activated.

::step-down

Specification ↗

Spec The ::step-up pseudo-element represents the button that increments the value inside a number input when activated.

::step-up

Specification ↗

Spec The :high-value pseudo-class matches on a meter element when its value is over the value specified by the high HTML attribute.

:high-value

Specification ↗

Spec The :low-value pseudo-class matches on a meter element when its value is under the value specified by the low HTML attribute.

:low-value

Specification ↗

Spec The :optimal-value pseudo-class matches on a meter element when its value is in the range determined by the optimum / low / high HTML attributes.

:optimal-value

Specification ↗

Spec The control-value() function computes to the current value of the form control it is on. If it is used on an element that is not a form control, it returns an empty string.

control-value( <type>? )

Specification ↗

MDN The type() CSS function allows you to specify a particular data type, and is used by the following CSS features:

@function --combine-strings(--strings type(<string>+)) {
  result: var(--strings) " ❤️";
}

section {
  font-family: system-ui;
  background-color: lime;
  padding: 20px;
}

section::after {
  content: --combine-strings("hello" "goodbye");
}

<section>What you gonna say?</section>

'<' [ number | string ] '>'

Specification ↗ MDN reference ↗