SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS selector for form input types?

    Is there a way to specify a form input type in a CSS selector? I'd like to add a style to my <input type="text"> elements in particular. How can you indicate the input type in the CSS selector?

  2. #2
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    class="" or id="" same as any other tag.
    $slider = 'n00b';

  3. #3
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    input.small {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 9px;
    }
    for instance...
    $slider = 'n00b';

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Slider, INPUT tags aren't the "same as any other tag". I should have qualified my question. I don't want to add a class to every <input type="text">.

    Is there a way to specify the TYPE attribute of the INPUT element in the CSS selector?

    It seems like there should be since there are a number of different form elements that are INPUT elements. Or is this just an HTML design flaw? Ideally, each type of element would get it's own element name in HTML, like TEXTAREA, for example. That gets a unique tag that can be used in a CSS selector. It's inconsistent.

    By the way, the root of this problem is the fact that IE6 forms look cool by default, and NS7 forms look like crap by default because of the old inset style inputs. I just want to make Netscape not look like crap.
    Last edited by audiolizard; Nov 25, 2002 at 00:34.

  5. #5
    jigga jigga what? slider's Avatar
    Join Date
    Oct 2002
    Location
    Utah (USA)
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by audiolizard
    Is there a way to specify the TYPE attribute of the INPUT element in the CSS selector?
    Sorry, I did miss that in your first post. Haven't played with setting the TYPE of an input element by CSS. Have you played with it and it doesn't work?
    Originally posted by audiolizard
    By the way, the root of this problem is the fact that IE6 forms look cool by default, and NS7 forms look like crap by default because of the old inset style inputs. I just want to make Netscape not look like crap.
    Code:
    input.main {
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 11px;
    	margin: 0;
    	padding: 1px;
    	padding-left: 3px;
    	border: solid #D8D8D8 1px ;
    }
    Is one I'm currently using to make NS/Moz forms not "look like crap".
    $slider = 'n00b';

  6. #6
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  7. #7
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Slider, the problem is how do you specify a type attribute in CSS? I haven't seen it documented anywhere.

    In jofa's post he mentioned trying input[type="submit"] but said that only works in Mozilla. Well, that's exactly what I want since IE already looks good. I'm not sure if it's valid CSS though.

    In that thread, shoop also posted this JavaScript code, but I'm trying to avoid messy hacks for things that SHOULD be simple.

    var x=document.getElementsByTagName('input')
    for (i=0; i<x.length;i++) {
    if (x[i].getAttribute('type')=='checkbox') {
    x[i].className='myCheck';
    }
    if (x[i].getAttribute('type')=='radio') {
    x[i].className='myRadio';
    }
    if (x[i].getAttribute('type')=='text') {
    x[i].className='myText';
    }
    if (x[i].getAttribute('type')=='submit') {
    x[i].className='mySubmit';
    }
    if (x[i].getAttribute('type')=='button') {
    x[i].className='myButton';
    }
    }

  8. #8
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Alternatively you can use CSS2 once it becomes better supported. Right now the only browser I know of that this works on is Mozilla 1.1+.(possibly 1.0 too)
    Code:
    <style type="text/css" media="screen">
    /*Submit buttons*/
    input[type="submit"]{
    
    }
    /*regular text boxes*/
    input[type="text"]{
    
    }
    /*continue for all other types of inputs*/
    </style>
    --Vinnie

  9. #9
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sit back and wait for IE7
    (Or more people using Mozilla)


    Attribute selectors:
    http://www.w3.org/TR/REC-CSS2/select...bute-selectors
    Last edited by jofa; Nov 25, 2002 at 13:01.

  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I tried the following, and it cleaned up the look of Netscape 7 and Opera 7 and didn't change anything in IE6:

    form input[type="text"],textarea {
    border: 1px solid #696999;
    }

    Thanks! So using brackets is the standard way to specify attributes in selectors in CSS2?

  11. #11
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! So using brackets is the standard way to specify attributes in selectors in CSS2?
    Yup.

    See the "attribute selectors" section of the CSS2 spec

  12. #12
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. I had searched the CSS1 spec but didn't find anything. So are there any disavdantages to using CSS2 besides the risk of a style not being recognized on certain browsers?

  13. #13
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    The problem with CSS2 is that IE6 has yet to support attribute selection. So use it all you want, but it probably won't work for 90%+ of your users. Maybe IE will use standards for real one day and not try to invent their own.

    --Vinnie

  14. #14
    SitePoint Enthusiast
    Join Date
    Nov 2002
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahh, but forms on IE6 already look good, so I'm all set.

    I'm almost ready to post my site for review...

  15. #15
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Originally posted by audiolizard
    Ahh, but forms on IE6 already look good, so I'm all set.

    I'm almost ready to post my site for review...
    Are you only looking at IE6 under Windows XP? Cause on Windows 2000 IE6's form elements are still the same old boring un-styled stuff.

    --Vinnie

    (WinXP at home, Win2k/Mac OSX/Linux(KDE) at work)


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
  •