treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Style Form Drop Down

  • I was wondering if there is a way to style the form <option> tag, so that the browser doesn't use the default style?

    If that's not clear this might clear it up. When writing a form option:

    <form>
    <option>
    <select>Item 1</select>
    <select>Item 2</select>
    </option>
    </form>

    This will use a default arrow on the right is there a way to get around the default and create your own arrow using an image?
  • It would help if you formed your html correctly ;)


    <form action=\"myprocess.php\">
    <select name=\"myvalue\">
    <option value =\"1\">one</option>
    <option value =\"2\">two</option>
    <option value =\"3\">three</option>
    </select>
    <input type = \"submit\" value =\"submit\">
    <form>


    css can style these elements to pretty much anything you want.
  • There's only so much you can do with straight CSS. If you actually want to start using custom images and that kind of stuff, check out this tutorial: http://ryanfait.com/resources/custom-ch ... o-buttons/