如何在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.

这很简单:
选择▼
到
选择▼
值1
Value2
或类似的东西

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

HTML:

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

问题:如何在没有任何 JavaScript 的情况下使用纯 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.

我想出了 this 纯 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中制作没有图像的自定义选择选项菜单样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！