SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Styling Select Boxes in IE7

    Hi,

    I wonder if anyone can help me out here. I have searched around for an answer - but find it hard to believe that I need to use Javascript to resolve the issue.

    I have just created this sample code to style both my input and select boxes in a form (i have used embedded css just for clarity in this example). Everything works a treat in IE8, FF, Chrome - but when it comes to IE7 all formatting for the select box is ignored.

    Can anyone tell me if there's an IE7 fix to enable the styling of select boxes ?

    Many Thanks,

    Chris.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <style type="text/css">
    <!--
    input, textarea, select {
    background:transparent url(images/bg_form.png) repeat-x scroll left top;
    border:1px solid #E5E5E5;
    font-size:12px;
    font-size-adjust:none;
    font-stretch:normal;
    font-style:normal;
    font-variant:normal;
    font-weight:normal;
    line-height:100%;
    outline-color:-moz-use-text-color;
    outline-style:none;
    outline-width:0;
    padding:9px;
    width:200px;
    }
    -->
    </style>
    </head>
    <body>
    <form method="post" id="form1"  name="contact-form" action="">
    <input id="field1" name="field1" type="text" />
    <select id="field2" name="field2">
    <option value="XX">xx</option>
    <option value="YY">yy</option>
    </select>
    </form>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Perhaps the best resource on styling differences of form elements is at: http://www.456bereastreet.com/archiv...form_controls/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for this Paul.....unfortunately IE7 wasn't around when this article was posted (Posted on September 27, 2004 in CSS) and it doesn't really help me.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mingkwong View Post
    Thanks for this Paul.....unfortunately IE7 wasn't around when this article was posted (Posted on September 27, 2004 in CSS) and it doesn't really help me.
    Times, they do change. The article lists an update in 2007 at http://www.456bereastreet.com/archiv...css_revisited/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,374
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    No you can't style much of a select in IE6 and 7 unfortunately. They won't take height or padding and you can't change the border colour either. (You can change the width, background-color and colur properties).

    The only way they will increase their height is by changing the font-size.

    They are a real pain at the best of times and the reason that we say leave form elements alone. Just wait until you try styling a file-input

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    36
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the advice Paul - greatly appreciated.
    I had read that this was a problem - but thought (hoped !) there might be a work around....

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,712
    Mentioned
    102 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mingkwong View Post
    Thanks for the advice Paul - greatly appreciated.
    I had read that this was a problem - but thought (hoped !) there might be a work around....
    Oh but there is. The work-around is to use a better browser.

    For some reason though, it's not wise to expect the same thing from our users.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •