如何在CSS中创建没有图像的自定义选项菜单样式？

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.

Answer 2

您可以在这里看到仅限css的解决方案，仅适用于webkit