为什么有些弹出框(或“选择”框)为蓝色,而有些则不在Mac OS X中?


1

我是Mac OS X的新手,我想知道为什么其中一些弹出框中有蓝色,但其他弹出框没有。例如,在一个网站上它看起来像这样(看看小“选择网站”框):

non-blue popup box

但是在另一个网站上,它看起来像这样(“显示:”框):

blue popup box

每个都有不同的名称吗?它们看起来都很基本 <select> 但奇怪的是,它在一个网站上是蓝色而在其他网站上没有。


在OS X系统中,预先选择蓝色按钮,以便可以在键盘上点击并选择它们。在Web上的Safari(浏览器)中,此行为由您正在查看的站点控制。
Richard

@Richard哦,所以如果我在雅虎答案时按Enter键,那个选择框会变为活动状态吗?因为我知道当它有一个蓝色轮廓(它也在Chrome中也是如此)时,如果我按下输入它会集中注意力,但我不知道小箭头是蓝色的。
Nathan

1
不。蓝色样式是下拉列表的默认“Aqua”样式,但站点可以使用CSS自定义此样式,在这种情况下,它会更改为其他样式(至少在Safari中)。我现在没时间写详细的答案了!
jtbandes

@jtbandes感谢您的解释,并且您完全正确,他们设置了宽度/高度,这是导致这种情况发生的原因: dl.dropbox.com/u/25819920/Screenshots/... 但是,嘿,至少他们看起来还不错!如果你愿意,可以发表评论作为答案,我会接受。
Nathan

Answers:


2

蓝色样式是下拉列表的默认“Aqua”样式,这是您在大多数应用程序中看到的样式。但是,网站可以使用CSS自定义下拉菜单的外观,在这种情况下,Safari和Chrome等浏览器会从默认样式切换到您看到的另一种样式。

这是一个小例子 将鼠标放在下拉列表中可以看到样式更改的位置。


1

在引用的示例页面中,它看起来yola页面正在实现他们自己的自定义下拉菜单,看起来像OS X下拉菜单(没有yola登录验证)但我“非常肯定”它不是本机UI下拉元素在其他平台上尝试它应该看起来与现在的相同或类似。

另一方面,雅虎答案页面使用的是一般的html或其他基于标准的下拉列表,它将与运行浏览器的平台的默认下拉列表相匹配。现在尝试在多个平台上打开该页面并观察它的变化。

例如,看看雅虎在Android上如何回答Chrome上的内容 Yahoo answers android chrome

如果你好奇这里是一个 引用一些生成标准化下拉菜单的java脚本代码 将采用基于操作系统平台的本机UI外观。


我在Windows 7上试过它,它是默认的下拉菜单。但是我认为当网站试图用CSS自定义它时,它就是那种风格(正如我的问题下面的评论所说)。他们可能为它设置了宽度,使其转向另一个版本。我很高兴它没有改变我之前在OSX截图上看到的XP风格,当他们尝试用CSS修改它时。
Nathan

是的,我看到发生了什么 - 他们设置宽度和高度,你可以在这里看到: dl.dropbox.com/u/25819920/Screenshots/...
Nathan
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.