SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    E-business guru Eirik's Avatar
    Join Date
    Nov 2000
    Location
    Oslo, Norway
    Posts
    413
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Setting style for specific input types

    Hi,

    I was wondering if there's any way to set the style of specific input types without resorting to classes.

    I'm using a CMS which produces a whole lot of form elements, and I'm looking to edit the style of the text fields. Sadly, the form elements produced by the CMS do not include a class, and if I create a input {} style, it affects (of course) all my form elements?

    Is there any way of getting around this?
    Sincerely,

    Eirik Johansen
    Netmaking AS

  2. #2
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can style stuff using the ID attribute instead of the class attribute. Does your CMS generate an ID attribute? If so, I'll post the appropriate CSS.

  3. #3
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Matter-of-fact, there is.

    Check this out:

    Code:
    <html>
    <head>
      <style type="text/css" media="screen">
        input { background-color: #ccc; }
        input[name=test] { background-color: #df0; }
      </style>
    </head>
    <body>
    
    <input type="text" name="help" />
    <input type="text" name="me" />
    <input type="text" name="test" />
    <input type="text" name="this" />
    <input type="text" name="css" />
    
    </body>
    </html>
    Notice in the CSS how the second input element has [name=test]? Name in the CSS corresponds with the name of the input tag. Notice that one of the input tags has the name="test" attribute? When you load this html into a browser, the input with the name attribute of test should have a nice bright green background while the others have a dull grey background.

    Hope that helps!

    P.S.
    This is only a test, don't mind the missing namespaces, doctypes, etc...
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ZuulJin
    Matter-of-fact, there is.

    Check this out:

    Code:
    <html>
    <head>
      <style type="text/css" media="screen">
        input { background-color: #ccc; }
        input[name=test] { background-color: #df0; }
      </style>
    </head>
    <body>
    
    <input type="text" name="help" />
    <input type="text" name="me" />
    <input type="text" name="test" />
    <input type="text" name="this" />
    <input type="text" name="css" />
    
    </body>
    </html>
    Notice in the CSS how the second input element has [name=test]? Name in the CSS corresponds with the name of the input tag. Notice that one of the input tags has the name="test" attribute? When you load this html into a browser, the input with the name attribute of test should have a nice bright green background while the others have a dull grey background.

    Hope that helps!

    P.S.
    This is only a test, don't mind the missing namespaces, doctypes, etc...
    Your approach works perfectly as long as you're using a browser other than IE/Windows . I usually do a generic style for the <input> tag, then go specific to each type, like input[type="submit"], input[type="text"].

  5. #5
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhhhh... it's name it uses, not id. I thought it was id. You lives and learns.


  6. #6
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yea... heheh. I'm used to Firebird now... Ever since they separated the browser and email clients (Firebird and Thunderbird) I've used Firebird mostly.
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  7. #7
    eigo hanasemasu ka? Yes. =) ZuulJin's Avatar
    Join Date
    Dec 2001
    Location
    Japan
    Posts
    655
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by greg.harvey
    Ahhhhh... it's name it uses, not id. I thought it was id. You lives and learns.

    Actually, it's by attribute

    input[attributeName=attributeValue]

    and, like Vinnie said, it's for browsers OTHER than IE/Win.
    Last edited by ZuulJin; Oct 16, 2003 at 09:03.
    U.S. DoD Member in Japan?
    Choose your base. Buy|Sell. Easy
    @ APO Ads.



  8. #8
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmmm. Interesting. The method I've used in the past works in IE/Windows. Perhaps it's different. I wouldn't be surprised if it was IE only though. I didn't care because it was an internal web based application.

    Example:
    Code:
    #button {
            font: button;
            border: 1px solid #000000;
            font-size: 12;
            font-family: Tahoma, Verdana, sans serif;
            color: #000000;
            background-color: #CCCCCC;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 120;
    }
    And then:

    Code:
    <input type="button" id="button" name="btn_Delete" value="Delete Associate" />
    I got that CSS from some dark corner of the web. I don't remember where. It worked so I used it...

  9. #9
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by greg.harvey
    Hmmmm. Interesting. The method I've used in the past works in IE/Windows. Perhaps it's different. I wouldn't be surprised if it was IE only though. I didn't care because it was an internal web based application.

    Example:
    Code:
    #button {
            font: button;
            border: 1px solid #000000;
            font-size: 12;
            font-family: Tahoma, Verdana, sans serif;
            color: #000000;
            background-color: #CCCCCC;
            padding-top: 0px;
            padding-bottom: 0px;
            width: 120;
    }
    And then:

    Code:
    <input type="button" id="button" name="btn_Delete" value="Delete Associate" />
    I got that CSS from some dark corner of the web. I don't remember where. It worked so I used it...
    That is standard, since the hash (#) sign denotes styling an element by its ID. However, if your form field didn't have an ID, or you wanted to style all submit buttons without resorting to a class or ID, attribute-based selection (the method ZuulJin showed) is the way to go.

  10. #10
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh, so it was the ID attribute in my case then. That's really useful. Thanks to both of you (and it wasn't even my question! )

    G

  11. #11
    E-business guru Eirik's Avatar
    Join Date
    Nov 2000
    Location
    Oslo, Norway
    Posts
    413
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, I guess the conclusing is that unless the input type doesn' have an ID (which it doesn't), the CSS code to accomplish this isn't cross browser compatibel, and therefore not usable (at least in my eyes).
    Sincerely,

    Eirik Johansen
    Netmaking AS

  12. #12
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,263
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Eirik
    So, I guess the conclusing is that unless the input type doesn' have an ID (which it doesn't), the CSS code to accomplish this isn't cross browser compatibel, and therefore not usable (at least in my eyes).
    Read Vinnies comments in post #4 of this thread. That'll tell you how to do it.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  13. #13
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I might be imagining this, but didn't I read that not all the browsers on all the platforms actually allow you to apply visual styles to "input" items anyway because sometimes they are created and displayed by the system and you get stuck with the normal system look for the widget ?

    Isn't XFORMs suposed to fix this and other form problems by defining the data that would wish to manipulate rather than the widget to display, not that (m)any browsers support XFORMs yet.

  14. #14
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BenANFA
    I might be imagining this, but didn't I read that not all the browsers on all the platforms actually allow you to apply visual styles to "input" items anyway because sometimes they are created and displayed by the system and you get stuck with the normal system look for the widget ?
    Right. For example, Safari on a Mac takes the colors for the form elements on my site, but keeps the system look for buttons. It doesn't look all that bad though so I don't mind. The ugly buttons on Windows browsers get replaced though, so I'm happy with the compromise .


Bookmarks

Posting Permissions

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