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

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.