#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60

    CSS: 2 Input Styles


    input{font-family: Arial; font-size: 14px; color: #000000; margin: 1px; padding: 2px; border: 1 solid #CCCCCC}

    I want that for the submit buttons and radio buttons, and checkboxes and stuff. But I want

    input{font-family: Arial; font-size: 14px; color: #000000; margin: 1px; padding: 2px; border: 1 dashed #CCCCCC}

    for the textboxes... how do I do two?
  2. #2
  3. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    Read "The class Attribute" here.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    13
    It's very simple:
    input[type="checkbox"]{font-family: Arial; font-size: 14px; color: #000000; margin: 1px; padding: 2px; border: 1 solid #CCCCCC}

    input[type="submit"]{font-family: Arial; font-size: 14px; color: #000000; margin: 1px; padding: 2px; border: 1 solid #CCCCCC}

    input[type="text"]{font-family: Arial; font-size: 14px; color: #000000; margin: 1px; padding: 2px; border: 1 dashed #CCCCCC}
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    20
    Are you sure Tuxie

    Doesn't seem to work with IE6, Moz1.0 or NS7
    It would be best to use classes anyway because most, probably all, browsers will support them.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    It's important to note that Tuxie's example is proper, just that support for it still isn't exactly widespread. So for the mean time, it's a poor solution.
  10. #6
  11. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    15
    Tuxie's example works fine the in the following web browers:

    Mozilla (Netscape 6+ and other similar browsers)
    IE5/Mac
    Opera 5+ (Maybe 6+)
    and Konqueror (don't know version numbers)
    Jason Contact Me
    Super moderator @ CodingForums
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    20
    I tested Tuxies example in NS6.1, NS7 (Beta), Moz1.0 and it had no effect.
  14. #8
  15. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    13
    Like jkd and MJEggertson said,there's nothing wrong with my code,replace it with something like background-color:red and you will clearly see the input elements become red.
    Also,all browsers,except for IE ofcourse,support this.
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Nov 2001
    Posts
    1,882
    Rep Power
    20
    Also,all browsers,except for IE ofcourse,support this.
    Dosen't work in NS4.7 or Opera6 (identified as Opera or Moz5).
  18. #10
  19. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60
    .radio{font-size: 14px; margin: 1px; padding: 1px; border: 0}
    .checkbox{font-size: 14px; margin: 1px; padding: 1px; border: 0}
    .text{font-family: Arial; font-size: 14px; color: #000000; margin: 1px; padding: 2px; border: 1 dashed #CCCCCC}

    But when I do the classes for each input thingy.. like for the textbox lets say. I would put class="text", and it doesn't work... why the hell not? LOL
  20. #11
  21. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2002
    Location
    Inside the GNU/Hurd kernel
    Posts
    492
    Rep Power
    13
    Originally posted by degsy
    Dosen't work in NS4.7 or Opera6 (identified as Opera or Moz5).
    NS4 doesn't support the W3C standards very well Besides,we are talking about modern browsers,not browsers that are 4 years old.Or would you like to check if it works in Internet Explorer 2?
    Opera has some quirks in the [attribute=value] thing,because only some attributes work.
  22. #12
  23. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60
    lol, but do you guys know my problem?
  24. #13
  25. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2002
    Posts
    570
    Rep Power
    60
    oh.... so then, thats the image soruce.. nvm, thanks for the code!

IMN logo majestic logo threadwatch logo seochat tools logo