自定义选择下拉列表 [英] Custom select dropdowns

问题描述

在Select / Option下拉菜单中只使用CSS可以完成多少操作？我看到的一切，使用某种风格化的下拉菜单使用JS。

How much can I accomplish using only CSS on a Select/Option dropdown? Everything that I've seen that uses some sort of stylized dropdown menu is using JS for it.

我希望如果有人可以发布链接到网站/一些下拉菜单的示例，只使用CSS（没有JS），看到可能的边缘情况用它。谢谢。

I would appreciate if someone could post links to sites/examples of some dropdown menus that are made with only CSS (no JS), to see edge cases of what is possible with it. Thank you.

推荐答案

当你对 code>控制，因为这是在页面上呈现的方式高度依赖于浏览器软件如何显示它。

You are always going to be restricted when it comes to styling the select control, as the way this is rendered on the page is highly dependant on how the browser software wishes to display it.

这类似于< input type =file/> 。一些浏览器显示为一个文本框，在其旁边有一个浏览..按钮，有些显示为只是一个浏览按钮旁边显示的文件名。

This is similar to the <input type="file" />. Some browsers display this as a textbox with a 'Browse..' button next to it, and some display this as just a browse button with the filename selected displayed next to it.

如果你想要一个样式的下拉列表，我建议使用CSS定位 div 控件等构建其中之一。然而，很可能你需要使用一些javascript

If you want a styled drop down list, I would recommend building one of these using CSS positioned div controls etc. However, it's likely youre going to need to use some javascript to get the desired effect.

这是一个样式下拉菜单的演示：

Here is a demo of a styled dropdown:

http://danielneumann.com/blog/how-to-style-dropdown-with -css-only /

如您所见，在不同的浏览器中它们总是看起来略有不同。

As you can see, they always look slightly different in different browsers.

这篇关于自定义选择下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！