CODEWITHSUNDEEP
htmlcss
Dai
Dai

Reputation: 155055

Is there a succint way to select all HTML form input elements without repeating rule selectors?

HTML has a design problem, in my opinion, whereby form input elements are inconsistently a type of <input /> (checkbox, text, etc) or are their own element type (select, textarea, etc). I understand it's based on the element's needs for child elements or not (<select> and <textarea> have children, but <input /> does not) but the different types of <input /> result in wildly different rendering - for example, checkbox and radio generally render as a small clickable square-shared input, whereas text and password are rectangular with no prescribed width.

This means that if you're styling inputs, you will need multiple rules.

Given this HTML:

<div class="field">
    <label>
        <input type="checkbox" /> Option 1
    </label>
    <label>
        <input type="checkbox" /> Option 2
    </label>
</div>

<div class="field">
    A question?
    <label>
        <input type="radio" /> Option 1
    </label>
    <label>
        <input type="radio" /> Option 2
    </label>
</div>

<div class="field">
    <label>
        Your name
        <input type="text" />
    </label>
</div>

<div class="field">
    <label>
        An essay
        <textarea></textarea>
    </label>
</div>

If you want to style only text inputs, you might think you would only need:

input,
textarea {
    border: 1px inset green;
}

However this will also (inappropriately) style the radio and checkbox inputs, so you either need to style input and then add a new rule for input[type=radio] and input[type=checkbox] that either re-styles them to match your design or resets their style - or change the rule to match input[type=text].

But neither is perfect, because the input rule still doesn't specify a style for the other types of input: either those modelled after a textbox (e.g. password and email) or those that are not (color, image, file, etc). You will need to add a rule for each and every type that you believe you could need - in addition to all of the other form elements, like select, textarea, button, and so on - and then you will need to repeat these selectors for each case the style needs to be different in a new context:

input[type=text],
input[type=password],
input[type=search],
input[type=tel],
input[type=url],
input[type=email],
textarea {
    border: 1px inset green;
}

input[type=radio],
input[type=checkbox] {
    border: none;
}

.someWrapper input[type=text],
.someWrapper input[type=password],
.someWrapper input[type=search],
.someWrapper input[type=tel],
.someWrapper input[type=url],
.someWrapper input[type=email],
.someWrapper textarea {
    border: 1px inset green;
}

.someWrapper input[type=radio],
.someWrapper input[type=checkbox] {
    border: none;
}

/* etc */

However I feel many inputs can be grouped into "input classes", such as the "text input" class: text, password, textarea, email, search, etc - the "box input" class: checkbox, radio, the "date" class: date, datetime, month, etc, and so on.

So rather than manually adding these classes as class values to my inputs in HTML, is there any browser-intrinsic way, such as through a CSS pseudo-class, e.g. input:textbox or input:boxinput? If so, this would greatly simplify CSS selectors for forms and reduce CSS bugs from missing selectors.

Upvotes: 3

Views: 1139

Answers (2)

Adjit
Adjit

Reputation: 10305

You should be able to just use input[type] however, that does not necessarily help you when applying to select or textarea fields. But you would have to add those selectors regardless.

input[type],
textarea {
    border: 1px inset green;
}

input[type=radio],
input[type=checkbox] {
    border: none;
}

input[type],
textarea {
    border: 1px inset green;
}

input[type=radio],
input[type=checkbox] {
    border: none;
}
<input type="text"/><br/>
<input type="button" value="click"/><br/>
<input type="checkbox"/><br/>
<input type="radio"/><br/>
<input type="color"/><br/>
<textarea></textarea>

Upvotes: 0

Hans
Hans

Reputation: 968

Luckily, there is something in CSS that nearly does what you want. The :read-write psuedo-selector (https://developer.mozilla.org/en-US/docs/Web/CSS/:read-write) selects elements that are editable by the user.

Consider the following:

<input type="radio" selected /><br/>
<input type="checkbox" selected><br>
<input type="button" value="Click me"><br>
<input type="submit" value="Submit me"><br>
<input type="text"><br>
<input type="password"><br>
<input type="email"><br>
<input type="date"><br>
<textarea></textarea><br>

The bottom 5 elements (not counting brs) will be selected and highlighted with the following one line of CSS:

*:read-write {border:1px solid #f3f;}

Browser support is fairly good for basic form fields.

Note: I say nearly in the first line. This selects date fields.

Upvotes: 3

Related Questions