CODEWITHSUNDEEP
htmlcssmenuhtml-select
M Haidar Hanif
M Haidar Hanif

Reputation: 35

How to make a custom select option menu style without image in CSS?

[I don't want the Unicode character]
For example: With using Black down-pointing triangle.
It'll using -webkit-appearance: none; to make it look better.

It would be simple as:
Select ▼
to
Select ▼
Value1
Value2
or something similar

HTML: 

<select>
  <option>Value1</option>
  <option>Value2</option>
</select>

QUESTION: How to do it in pure CSS, without any JavaScript?

Upvotes: 2

Views: 13086

Answers (2)

Ionuț Staicu
Ionuț Staicu

Reputation: 22204

You can see here a css only solution, available only for webkit

Upvotes: 2

mingos
mingos

Reputation: 24522

Select boxes are not really styleable, so I wouldn't be surprised if this was impossible. Some limited styling options are available, but even they are unreliable. The only way to effectively style a select box is via jQuery and, unfortunately, images. My favourite form styling plugin is this Uniform - maybe it's worth to have a look at it.

I came up with this pure HTML, hacky solution, but it sucks. The arrow catches mouse events before they reach the select box. You'd need to do some hacking to eliminate that.

Upvotes: 6

Related Questions