How to style drop down list? [duplicate]

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
– Fiona - myaccessible.website, Commented Jul 17, 2013 at 13:29
"Style" is a little ambiguous; text color, background color, border, or make it look something like uniform? — Brad Christie
– Brad Christie, Commented Jul 17, 2013 at 13:29
What have you tried? Are you looking for a pure-CSS or JS approach? stackoverflow.com/questions/1895476/… — jterry
– jterry, Commented Jul 17, 2013 at 13:30
I edited the question, I mean how to add css style to the drop down list. — alsabsab
– alsabsab, Commented Jul 17, 2013 at 13:31
But <option> is always a child of <select> and you also open a <select>-tag in the second line - which is never closed. What exactly are you trying to achieve? — insertusernamehere
– insertusernamehere, Commented Jul 17, 2013 at 13:39

Vince Lowe · Accepted Answer · 2013-07-17 14:29:09Z

3

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/

answered Jul 17, 2013 at 14:29

Vince Lowe

3,6507 gold badges39 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

R Lacorne · Accepted Answer · 2013-07-17 14:12:15Z

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, 2013 at 14:12

R Lacorne

6045 silver badges10 bronze badges

1 Comment

alsabsab Over a year ago

ok, how can I achieve that?

Collectives™ on Stack Overflow

How to style drop down list? [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related