Form Formatting

When I apply css to input in a form, like width and max-width, that applied to all input types, text, checkbox, ect.
Is there a way to select just certain inputs based on their type? So for example, a checkbox is not as wide as a text input. Or do I have to apply classes to my inputs.

nth:child? direct selectors? i think it would depend a lot from how many fields you had in that form. I’d propbab give it a class myself.

Yes, that’s the obvious solution. I just wondered if it were possible to select by type, that would be very useful.

input "text" {
  width: 95%;
  max-width: 300px;
}

a quick search gv me this.
input[type="text"] input[type="submit"]
http://stackoverflow.com/questions/9904653/css-styling-input-type-for-select-lists

1 Like

Exactly what I was looking for. Thanks.

yw! glad to have been of assistance :slight_smile:

1 Like

FYI, these are called attribute selectors, in case you want to read more.

3 Likes

OK, is it possible to select a few attribute values in one go?
Right now I have:-

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea    {
                 max-width: 300px;
                 width: 95%;
}

Which works, but can I have something like:-

input[type="text|email|tel|password"],
textarea    {
                 max-width: 300px;
                 width: 95%;
}

Or however it may be done.

Nope :slight_smile: . That specifically isn’t possible.

Never mind. It’s just that looking at the examples in your link, it looked like some sort of regex method for selecting values, so thought it may be possible.

you could always use jquery. but it seems overkill when you could add a class

The comma separated selectors work just fine.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.