当前位置：文江博客话题详情

HTML/CSS - 设置选择菜单样式

发布于 2024-10-05 19:54:19 字数 343 浏览 2 评论 0原文

我正在为我正在开发的网站使用多个下拉菜单。在 Chrome 和 Safari 中，菜单呈现良好。但在 Firefox 中，下拉箭头位于菜单的中间。

编辑这是图片。

这就是它在所有浏览器中的样子。（只有 Chrome 中是这样。） alt text

这是当前在 Firefox 和 IE 中执行的操作：

alt text

如何解决此问题？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无敌元气妹 2024-10-12 19:54:19

尝试使用背景位置：右中；在CSS中。这可能有帮助

回复收藏 0 原文

月下伊人醉 2024-10-12 19:54:19

设计 select 元素的样式是一件非常痛苦的事情。我建议不要使用select元素，而是使用单选按钮 + 标签 + JavaScript< /code> 模拟选择元素。它将使您能够更好地控制样式，并且仍然保持可访问性（如果做得正确）。

我相信有一个 jQuery 插件可以做到这一点（我知道你没有标记 JavaScript 或 jQuery）。

标记可能看起来像这样：

<ul class="select-replacement">
  <li>
    <input type="radio" id="option1" name="selectElementName" value="value 1" />
    <label for="option1">Value 1</label>
  </li>
  ...
</ul>

只是为了表明我还没有完全了解它，这里有一个纯粹的 jsfiddle HTML+CSS select 样式元素，而不实际使用 select 元素。这是一个 3 分钟的黑客工作，JavaScript 会让它在 Internet Exploder 中变得更加干净/工作。

Styling a select element is a royal pain in the butt. I would suggest not using a select element, and instead use radio buttons + labels + JavaScript to emulate a select element. It will give you more control over the styling, and still maintain accessibility (if done correctly).

I believe there is a jQuery plugin to do this (I know you didn't tag JavaScript or jQuery).

The markup could look something like this:

<ul class="select-replacement">
  <li>
    <input type="radio" id="option1" name="selectElementName" value="value 1" />
    <label for="option1">Value 1</label>
  </li>
  ...
</ul>

And just to show that I'm not full of it here's a jsfiddle of a pure HTML+CSS select style element without actually using a select element. It's a 3 minute hack-job, and JavaScript would make it much cleaner/work in Internet Exploder.

回复收藏 0 原文

~没有更多了~