How to make a custom select option menu style with

Question

[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?

Answer 1

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

Answer 2

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.