Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jul 2003
    Location
    Denmark
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to specify width of dropdown list

    I have the following code:
    Code:
    <form>
    <select name="selectmenu" onchange="go(this.form)">
      <option>Vælg spil</option>
      <option value="acquire.php">Acquire</option>
      <option value="backgammon.php">Backgammon</option>
      <option value="bloodbowl.php">Blood Bowl</option>
      <option value="diplomacy.php">Diplomacy</option>
      <option value="labyrint.php">Labyrint</option>
      <option value="hex.php">Hex</option>
      <option value="jeopardy.php">Jeopardy</option>
    </select>
    </form>
    Which produces a beautiful dropdown. How do I force a specific width?

    What happens with overflow?

    It's not really that beautiful, is it? How do I change background colour and text colour?

    Thanks a lot, and a merry Xmas to all
    Mz

  • #2
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <head>
    ...

    <style type="text/css">
    #myselect {
    width: 200px;
    background-color: #f00;
    color: #fff;
    }
    </style>
    ...
    </head>

    <body>
    ...

    <select id="myselect" ...>
    ...
    </body>


    And voila.

    To learn more, check out: http://www.w3schools.com/css/

  • #3
    Regular Coder
    Join Date
    Jul 2003
    Location
    Denmark
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, but that was my own first choice. It doesn't work, I'm afraid.

    Any other ideas?


    Mz

  • #4
    Regular Coder
    Join Date
    Jul 2003
    Location
    Denmark
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ooops, my mistake. It does work. Thanks, Aaron.

  • #5
    Regular Coder
    Join Date
    Jul 2003
    Location
    Denmark
    Posts
    111
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Now, about overflow; Firefox lets the curtain adjust to the content but IE forces the width I specified. I'm actually happy with the way Firefox handles it (but I must say that I could imagine preferring the other) so how do I apply that to IE?

    Also, how do I set the color of the option that is hovered upon?


    Thanks,
    Mz

  • #6
    Senior Coder
    Join Date
    Feb 2003
    Location
    Ontario, Canada
    Posts
    1,223
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Selects aren't very stylable. I'd leave their widths alone. As for the styling the hovered option, you would in theory do #myself option:hover { /* styles here */ }, but I'm pretty sure not even Mozilla supports that. Mozilla (Firefox, anyway) lets you add padding and margins and borders to your option tags, so it might ackowledge the :hover, but likely not.

    Selects are almost always ugly and clash with the design. The only way to make a pretty one would be to design it in Flash or JavaScript, though I would hate to rely on either.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •