SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    styling a <select>

    How would I go about styling the text of a <select> menu? I don't mean styling the menu itself using input, select, etc., but where there are categories listed in one font color, and then sub-categories indented and listed in another.

    Like: (I know the code won't work, it's not literal
    <select>
    <option font color="red">PARENT CATEGORY 1</option>
    <option font color="gray">(indent here)child category 1</option>
    <option font color="gray">(indent here)child category 2</option>
    </select>

  2. #2
    doing my best to help c2uk's Avatar
    Join Date
    May 2005
    Location
    Cardiff
    Posts
    1,832
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can group options with the optgroup tag, more info can be found on htmldog: http://www.htmldog.com/reference/htmltags/optgroup/

    You then can style those with css a little bit.
    Dan G
    Marketing Strategist & Consultant

  3. #3
    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,

    Beaten to it but I was about to say the same
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    .group1{background:red;color:#fff}
    .group2{background:blue;color:#fff}
    .group3{background:black;color:#fff}
    .group4{background:yellow;color:#000}
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
     <fieldset>
     <legend>Optgroup Test</legend>
     <label for="test">Select your option
     <select id="test" name="test">
      <optgroup class="group1" label="Group 1">
      <option value="1">group1 - 1</option>
      <option value="2">group1 - 2</option>
      <option value="3">group1 - 3</option>
      <option value="4">group1 - 4</option>
      </optgroup>
      <optgroup class="group2" label="Group 2">
      <option value="5">group2 - 1</option>
      <option value="6">group2 - 2</option>
      <option value="7">group2 - 3</option>
      </optgroup>
      <optgroup class="group3" label="Group 3">
      <option value="8">group3 - 1</option>
      <option value="9">group3 - 2</option>
      </optgroup>
      <optgroup class="group4" label="Group 4">
      <option value="10">group4 - 1</option>
      <option value="11">group4 - 2</option>
      <option value="12">group5 - 3</option>
      </optgroup>
     </select>
     </label>
     </fieldset>
    </form>
    </body>
    </html>
    Be aware that some browsers will allow no styling on the select so applying styles to form elements does vary between browsers and there is little you can do about it.

  4. #4
    SitePoint Wizard tgavin's Avatar
    Join Date
    Feb 2003
    Location
    FL
    Posts
    1,051
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's exactly what I was looking for. This is for an admin CMI, so we're not worried about the styling.

    Thanks guys!


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
  •