www.webdeveloper.com
Results 1 to 11 of 11

Thread: Is there a way to style using type?

Hybrid View

  1. #1
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372

    Question Is there a way to style using type?

    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

  2. #2
    Join Date
    Mar 2011
    Posts
    1,148
    Use:

    input[type=text] { ... }

    input[type=submit] { ... }

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

  3. #3
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372
    Thanks! Is that the standard? I've used so much CSS, but this has never come up.

    Thanks again!

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Yes, it's the standard. It's called an attribute selector.

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

  5. #5
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372
    Hmm... people should use this more.
    Thanks for sharing!

  6. #6
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    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.

  7. #7
    Join Date
    May 2009
    Location
    Rochester, NY
    Posts
    372
    Yeah, I could imagine. But I'll use it for now.

  8. #8
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Quote Originally Posted by svidgen View Post
    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?

  9. #9
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by cbVision View Post
    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.

  10. #10
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Quite the explanation

  11. #11
    Join Date
    Jan 2007
    Location
    Wisconsin
    Posts
    2,120
    Quote Originally Posted by cbVision View Post
    Quite the explanation
    The concise but adequate response often escapes me.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles