CSS All Inputs Not Checkbox - TypeScript

When styling a form, it is common to apply styles to all input fields. However, this can cause issues when checkboxes are present, as their styles may not align with other input types. In TypeScript, there is a straightforward solution to this problem.

First, we can select all input elements except checkboxes using the :not() selector. This allows us to group all input elements together for styling purposes.

input:not([type="checkbox"]) {
   /* styles for input elements */
}

Next, we can create a separate selector for checkboxes if we wish to apply unique styles to them.

input[type="checkbox"] {
   /* styles for checkbox elements */
}

Using TypeScript, we can apply these styles to all input fields on a specific page or application-wide by targeting the body element and using the :not() selector.

const body = document.querySelector('body');
body.classList.add('all-inputs-not-checkbox');

Then in our CSS file, we can apply styles to the input elements using the .all-inputs-not-checkbox selector.

.all-inputs-not-checkbox input:not([type="checkbox"]) {
   /* styles for input elements */
}

.all-inputs-not-checkbox input[type="checkbox"] {
   /* styles for checkbox elements */
}

By using TypeScript to apply CSS styles to all input fields except checkboxes, we can ensure a consistent and visually appealing form interface.