SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to apply different css to input tag with different type attr

    On my webpage, I currently using this

    <style>
    .text {border:1px solid black}
    .radio {border:none; background-color:transparent}
    .check {border:none; background-color:transparent}
    </style>

    <input type=text class=text>
    <input type=radio class=radio>
    <input type=checkbox class=check>

    I want to define different css for the same input tag but apply to different type attribute. Is there any way I can do this without using class name or #id because I want to reserve the class name and id attribute for something else.

    I know this does not work but something similar like this.

    input.text {border:1px solid black}
    input.radio {border:none; background-color:transparent}
    input.checkbox {border:none; background-color:transparent}

    <input type=text>
    <input type=radio>
    <input type=checkbox>

  2. #2
    morphine for a wooden leg randem's Avatar
    Join Date
    Jun 2002
    Location
    .chicago.il.us
    Posts
    957
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    INPUT[type='text'] {border:1px solid black}
    INPUT[type='radio'] {border:none; background-color:transparent}
    INPUT[type='checkbox'] {border:none; background-color:transparent}

  3. #3
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    randem,
    I tried on IE6 and it doesn't work. Any suggestion?

  4. #4
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Randem's code is technically correct but unfortunately it uses advanced CSS selectors (which I think are from CSS3) which are currently only supported in Mozilla / NS7. Since you don't want to use IDs or classes the only solution is to "embed" the styles in a style attribute, for example:
    Code:
    <input style="font-family: verdana; color: red; background-color: orange;" />

  5. #5
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Skunk. I've tried randem's code with NS6 and it works great. I thought there might be a away that you can apply the same thing to IE6 without embed the style.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Posts
    75
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should work with both IE5+ and Netscape 6+

    var x=document.getElementsByTagName('input');
    for (i=0;i<x.length;i++){
    if (x[i].getAttribute('type')=='text')
    x[i].style.border='1px solid black';
    if (x[i].getAttribute('type')=='radio'){
    x[i].style.border='0px';
    x[i].style.backgroundColor='transparent';
    }
    if (x[i].getAttribute('type')=='checkbox'){
    x[i].style.border='0px';
    x[i].style.backgroundColor='transparent';
    }
    }

  7. #7
    SitePoint Member
    Join Date
    Jun 2002
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's a great idea. Thanks


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
  •