How to style drop down list?

Question

How to add css styles to the drop down list on this form? I searched a lot over the internet but no useful results found. Thanks

    echo  "<form method='post' action='advisor.php?view=$view'>
    Select Student: <select name='data'>";
    while($row = mysqli_fetch_array($query))
        {

                    echo "<option value=\"".$row[3] . "\">".$row[0] ." " . $row[1] . " (".$row[3].")".
                    "</option>";
        }
      echo    " </select>
        <input type='submit' name='submit' class='buttonM' value='Show Questions' />
        </form>";
     }

What do you mean by style? What are you trying to make it look like? — Fiona - myaccessible.website, Jul 17 '13 at 13:29
"Style" is a little ambiguous; text color, background color, border, or make it look something like [uniform](http://uniformjs.com/)? — Brad Christie, Jul 17 '13 at 13:29
What have you tried? Are you looking for a pure-CSS or JS approach? http://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript — jterry, Jul 17 '13 at 13:30
I edited the question, I mean how to add css style to the drop down list. — sabsab, Jul 17 '13 at 13:31
@insertusernamehere sorry I deleted the comments, I wish if I know the best way to style the drop down list and if I got the idea I will add another effects to the drop down list. — sabsab, Jul 17 '13 at 13:43
As you see, you can't style a ` dropdown for the languages switcher?](http://stackoverflow.com/a/14926603/1456376).

score 3 · Accepted Answer · answered Jul 17 '13 at 14:29

Check this out - http://bavotasan.com/2011/style-select-box-using-only-css/

html

<div class="styled-select">
   <select>
      <option>Here is the first option</option>
      <option>The second option</option>
   </select>
</div>

css

.styled-select select {
   background: transparent;
   width: 268px;
   padding: 5px;
   font-size: 16px;
   line-height: 1;
   border: 0;
   border-radius: 0;
   height: 34px;
   -webkit-appearance: none;
}

For more elaborate styling you need to use javascript - like this http://tympanus.net/codrops/2012/10/04/custom-drop-down-list-styling/

score 0 · Answer 2 · answered Jul 17 '13 at 14:12

0

If what you mean is "How can I style the selectable options in a form element?", then you're gonna have a hard time. You cannot use pure CSS to achieve that. You could create an "

" drop-down menu to achieve the visual effect you want, but that depends what your form is used for, really...

answered Jul 17 '13 at 14:12

R Lacorne

604
5
10

ok, how can I achieve that? – sabsab Jul 17 '13 at 14:23

How to style drop down list?

2 Answers2