Как сделать собственный стиль меню выбора без изображения в CSS?

Question

[Мне не нужен символ Unicode]
Например: с использованием черного треугольника, направленного вниз.
Он будет использовать -webkit-appearance: none;, чтобы он выглядел лучше.

Это было бы просто как:
Select ▼
для
Select ▼
Value1
Value2
или что-то похожее

HTML:

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

ВОПРОС: Как это сделать на чистом CSS, без JavaScript?

Answer 1

Флажки выбора не очень удобны, поэтому я не удивлюсь, если это будет невозможно. Некоторые ограниченные варианты стилей доступны, но даже они ненадежны. Единственный способ эффективно стилизовать поле выбора - это использование jQuery и, к сожалению, изображений. Мой любимый плагин для создания формы - это Uniform - возможно, стоит взглянуть на него.

Я придумал этот чистый HTML, хакерское решение, но это отстой. Стрелка ловит события мыши, прежде чем они достигнут поля выбора. Вам нужно взломать, чтобы устранить это.

Answer 2

Вы можете увидеть здесь решение только для css, доступное только для webkit