#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    3
    Rep Power
    0

    Question creating flat input tags with css


    Hi,

    The former webmaster made all the input tags on my site look flat with a black border by using css:

    input, select {
    border: 1px #000000 solid;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    padding-top: 1px;
    padding-right: 0px;
    padding-bottom: 1px;
    padding-left: 2px;
    height: 18px
    }

    This causes a problem though:
    My checkboxes look really ugly. They don't look flat at all, but retain their sunken look, only with the black line around them as well.
    Does anyone have a tip how to make 'm look better, or knows of an alternative html tag to use for checkbox controls?

    Thanx in advance,

    Shan: Web Mistress
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    The only sure fire way to ensure it works in all current browsers, regardless of the format of the page is to assign a class to either of the input type. Whichever you have less of would probably be easiest. If you assign a class to the text inputs, you'll need to add the border, if you assign a class to the checkboxes, you'll need to clear the border.
    Code:
    <style type="text/css">
    input {border: 1px solid black;}
    input.clear {border: none;}
    </style>
    
    <input type="text"><input type="checkbox" class="clear">
    Or...
    Code:
    <style type="text/css">
    input.flat {border: 1px solid black;}
    </style>
    
    <input type="text" class="flat"><input type="checkbox">
    There are cleaner ways of doing it, but either they don't work in all current browsers (Explorer), or they demand your page is well structured (which your page may be, but without knowing the structure, we can't build proper CSS rules).
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    3
    Rep Power
    0
    Great! thanks a lot! That works just fine.

    Do you happen to know if there's any way to make checkboxes look flat? (Like textboxes and buttons look flat through the css code I pasted in my first message) is there maybe another HTML tag than <input type="checkbox"> that I could use?

    Greetz,

    Shan
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Background image, maybe? I'm not sure. I did something like that about three years ago, but I can't even remember how I did it...
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Clipping an element requires absolute positioning, which may require nesting the element inside a relatively positioned one for inflow placement. The invert-stuff is currently IE-only; stay tuned...

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    input, select   {
                     height: 18px;
                     font: 200 11px Arial, Helvetica, sans-serif;  
                     margin: 0px; 
                     padding-right: 0px 0px 1px 2px;
                     border: 1px #000000 solid;  
                    }
    
    input.Itextbox  {
                     filter: invert;
                     border-width: 0px;
                    }
    
    input.checkbox  {
                     position: absolute;
                     clip: rect(4px 14px 13px 5px);
                     padding: 0px;
                    }
    
    input.Icheckbox {
                     filter: invert;
                     position: absolute;
                     clip: rect(4px 14px 13px 5px);
                     padding: 0px;
                    }
    
    body            {
                     background: olive;
                    }
    
    </style>
    </head>
    <body>
    <form>
    <input type="text"><br />
    <input type="text" class="Itextbox"><br /><br />
    <input type="checkbox" class="checkbox"><br />
    <input type="checkbox" class="Icheckbox"><br />
    <input type="checkbox" class="checkbox"><br />
    <input type="checkbox" class="Icheckbox"><br />
    <input type="checkbox" class="checkbox"><br />
    <input type="checkbox" class="Icheckbox"><br /><br />
    </form>
    </body>
    </html>
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2003
    Posts
    3
    Rep Power
    0
    This last suggestion works nicely!!!
    ...
    But only in iexplorer OR netscape (I didn't test in other browsers) depending on what values you use. Plus I found that in Netscape { border: none } results in checkbox: none.
    And since I don't want to clutter the site with javascript saying 'if iexplorer do this else if netscape do that' I just gave up.
    I removed the redefinition of the input tag, and assigned classed to the input tags that I know will look flat when I tell 'em to. Just as MJEggertson suggested in the first place.
    Thanx for all the input!!!

    Shan
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Nov 2001
    Posts
    765
    Rep Power
    13
    Plus I found that in Netscape { border: none } results in checkbox: none. And since I don't want to clutter the site with javascript saying 'if iexplorer do this else if netscape do that' I just gave up.
    Don't believe I suggested border:none. Also: importing browser-specific stylesheets (or patches) is a cinch, requires one <script src="..."> tag in every page.
  14. #8
  15. 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
    I like being able to do:

    input:not([type="checkbox"]):not([type="radio"]) {
    border: 1px solid black;
    }

    myself. Of course, only Mozilla supports this CSS3 selector...
    Jason Contact Me
    Super moderator @ CodingForums
  16. #9
  17. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    Hell, if Microsoft would get in gear and even realease a CSS2 compliant browser, all would be ok with
    Code:
    input[type="text"]{}
    I mean, Explorer6 was pretty damn good for it's time, but now...it just plain sucks compared to Mozilla, Netscape, Opera...

IMN logo majestic logo threadwatch logo seochat tools logo