如何使自定义选择选项菜单样式没有CSS中的图像？ [英] How to make a custom select option menu style without image in CSS?

问题描述

[我不想使用Unicode字符]

例如：使用黑色向下三角形。

它将使用 -webkit-appearance：none; 使它看起来更好。

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

这很简单：

选择▼

到

选择▼

Value1

Value2

或类似的

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

HTML：

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

问题：如何在纯CSS中使用，

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

推荐答案

选择框不是真正的风格，所以如果这是不可能的，我不会感到惊讶。一些有限的样式选项可用，但即使它们是不可靠的。有效地为选择框设计样式的唯一方法是通过jQuery和不幸的是图像。我最喜欢的表单样式插件是这个 Uniform - 也许值得一看。

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.

我想出了这个纯HTML，hacky解决方案，但它很糟糕。箭头在到达选择框之前捕获鼠标事件。你需要做一些黑客来消除这一点。

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.

这篇关于如何使自定义选择选项菜单样式没有CSS中的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！