Is there a way to style using type?

[multimediocrity]

I would like to change the appearance of an input (type=text) field using CSS. However, I would like input (type=submit) to look different. Is there a way I can do this in CSS without making my own classes or putting them in different container tags?

Thanks,
M

[rtrethewey]

Use:

input[type=text] { ... }

input[type=submit] { ... }

in your stylesheet to control specific types of <input> tags.

[multimediocrity]

Thanks! Is that the standard? I've used so much CSS, but this has never come up.

Thanks again!

[cbVision]

Yes, it's the standard. It's called an attribute selector.

http://www.w3schools.com/css/css_att..._selectors.asp

[multimediocrity]

Hmm... people should use this more.
Thanks for sharing!

[svidgen]

Yep. A lot of folks will argue that you should avoid it though -- that everything with special styling should just be given a class. Though, you may only notice the performance (or confusion) implications of more complex non-class selectors for heavily interactive applications.

[multimediocrity]

Yeah, I could imagine. But I'll use it for now.

[cbVision]

A lot of folks will argue that you should avoid it though -- that everything with special styling should just be given a class.

This sounds crazy to me. You apply a class to every paragraph or list item tag?

[svidgen]

This sounds crazy to me. You apply a class to every paragraph or list item tag?

Oh no, I don't. You'll notice I said, a lot of folks, as to exclude myself to some extent. I personally don't adhere well to any ideal very well!

That said, there may be some folks who seem to feel quite rigidly about it. But even then, most folks who say they adhere to this "class-only" philosophy (whatever it's called) seem to really mean they're trying to achieve three things (usually best done with class-only style selectors):

Reusable rules, and reusable "components"
Rather than create a rule that applies to an ID, or a specific nesting structure, create general rules that can apply to any tag at any point in a nested structure. Build generic, common, embeddable structures with these rules. And then actually reuse your reusable rules! Reuse rules whenever possible, rather than create a new rule.

Keep CSS small
Don't send the client more CSS than is necessarily. This comes naturally when if you're building reusable rules and creating rules and "components" that are intended to be ru-used.

Efficient style selection
When a tag matches a single rule and a single rule only, the browser has much less work do when applying styles. This can be particularly important for complex sites and sites with a lot of scripting. If you're page is continually adjusting the style of a node, moving nodes around the DOM, etc., it's good to avoid the extra work of "mixing" rules from various selectors.


So, that's it. I personally try to restrict my rules to tags and classes -- opting for class in most cases. But, if I want consistency across all (most) of my anchors, I throw in an anchor rule. If I want to set the font-face of the page globally, I throw a rule on the body, etc.


See http://net.tutsplus.com/articles/lec...f-massive-css/ if you're interested.

[cbVision]

Quite the explanation

[svidgen]

Quite the explanation

The concise but adequate response often escapes me.