Tell me more ×
Ask Different is a question and answer site for power users of Apple hardware and software. It's 100% free, no registration required.
up vote 1 down vote favorite

I am fairly new to Mac OS X and I am wondering why some of these pop up boxes have a blue in them, but others do not. For example, on one website it looks like this (look at the little "Select site" box):

non-blue popup box

But then on another site, it looks like this (the "Show:" box):

blue popup box

Is there a different name for each of these? They both look like basic <select> elements but oddly it is blue on one site and not on others.

share|improve this question
In the OS X system blue buttons are pre-selected so that one can hit return on the keyboard and choose them. In Safari (browser) on the web this behavior is controlled by the site you're looking at. – Richard Apr 26 '12 at 22:09
@Richard Oh, so if I were to press enter while on Yahoo answers, that select box would become active? Because I know that when it has a blue outline (it does this in Chrome too) that if I press enter it will focus that, but I don't know about the little arrows being blue. – Nathan Apr 26 '12 at 22:13
1  
Nope. The blue style is the default "Aqua" style for dropdowns, but sites can customize this using CSS, in which case it changes to the other style (at least in Safari). I don't have time to write up a detailed answer right now though! – jtbandes Apr 26 '12 at 22:42
@jtbandes Thanks for the explanation, and you are completely right, they set a width/height which is what caused this to happen: dl.dropbox.com/u/25819920/Screenshots/… But hey, at least they still look nice! If you want, post your comment as an answer and I'll accept it. – Nathan Apr 27 '12 at 2:05

2 Answers

up vote 2 down vote accepted

The blue style is the default "Aqua" style for drop downs, which is what you'll see in most applications. However, sites can customize the appearance of dropdowns using CSS, in which case browsers like Safari and Chrome switch from the default style to the other one you see.

Here's a little example where you can see the style change when you put your mouse on the dropdown.

share|improve this answer
up vote 1 down vote

In the example pages referenced it looks the yola page is implementing their own custom drop down menu that happens to look like an OS X drop down menu (don't have a yola log in to verify) but I am "pretty sure" its not a native UI Drop down element try it on other platforms it should look the same or similar to how it does now.

While on the other hand the Yahoo answers page is using a general html or other standards based drop down that will match the default drop down look for the platform that the browser is running on. Now try opening that page on multiple platforms and watch it change.

For example see how Yahoo answers looks on chrome on android Yahoo answers android chrome

If your curious here is a reference to some java-script code that produces a standardized drop down menu that will adopt a native UI appearence based on Operating System platform.

share|improve this answer
I tried it on Windows 7 and it's the default drop down. But I think that it goes to that style when sites try to customize it with CSS (as the comment below my question said). They probably set a width for it, making it turn to the other version. I'm just glad it doesn't change to that XP style that I have seen before on screenshots of OSX when they try to modify it with CSS. – Nathan Apr 26 '12 at 23:50
Yeah I see what happened - they set a width and height, as you can see here: dl.dropbox.com/u/25819920/Screenshots/… – Nathan Apr 27 '12 at 0:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.