Funky dropdowns

[Chalky]

I have just looked at the dropdowns on my forum from all browsers on my PC and they all look like the first two attachments.  However, as you see in the other attachments, when I view on my iPhone, they look soooo much smarter!  Why do they look so much better on my iPhone and what do I need to do to make them look like this on PC browsers as well?  Thanking you

[Arantor]

The dropdowns are handled by the browser, and reimplementing them to be consistent in all browsers is a massive, massive amount of work - and many things break.

[Chalky]

Oh 

That's what I was afraid of...  They do look fab on the iPhone though don't they?

Thanks for the quick reply

[Arantor]

*shrug* I'm personally not that bothered, they all look pretty similar because they all do the same basic job.

I would note that the software I work on did actually reimplement selectboxes in its own code and the number of things that broke was phenomenal, we're still finding places it doesn't work properly.

[MrPhil]

There are a couple of things you could look at, if you want to go through the effort of making desktop browsers look like a smartphone browser. I offer no promises as to whether they're even feasible:

• Play with various CSS settings like rounded corners for the <select> statement, to see if you can replicate the look. It looks like SMF is using pretty much plain vanilla settings, so maybe you can do something. I don't know if there's any way to replace the "open" button with a different graphic.
• Rewrite the <select> widget with a massive amount of HTML, CSS, and Javascript, to use a <div> box with rounded corners and your own "open" button graphic. That is, you might no longer even have a <select> tag, but a <div> with a lot of Javascript to emulate a <select> when you click on it. I'm guessing that's what @Arantor did, and it's probably a lot of work.

Rather than starting from scratch, I would suggest googling around to see if and how other site designers have tackled this. Maybe there's something in the jQuery library that would be useful.

[Arantor]

That's part of the problem; a number of browsers don't particularly offer much support for styling select.

Most site designers that have reimplemented it have replaced it from scratch through one of the several plugins that all hide the <select> and do it with <div> but I guarantee you that it will not work properly if you try implementing it directly on top of SMF, there are too many <select> instances that do strange things through SMF (I speak from experience)

[kat]

Serves you right for using Chrome.

[Chalky]

Serves you right for using Chrome.

I'm not using Chrome Kitty, I'm using Pale Moon - but I compared the dropdowns using Firefox, Safari, IE, Chrome and Opera and they all looked the same.  Chrome just happened to be the screenshot I posted (there was no point posting them all as they all looked the same...).

Thanks MrPhil, that sounds very helpful, but a bit daunting as I don't actually know any CSS (or Javascript or anything else).  I plan to learn CSS but that will take time and learning PHP comes first.  So Arantor's advice is looking more realistic right now - just shrug and say "Well, it was a nice idea" 

[Arantor]

I think K@'s joking in my direction as he knows full well that I use Chrome

[Matthew K.]

Well K@ can suck it Chrome is amazing.

[Chalky]

LOL 

[kat]

K@ is sweet, innocent and chaste.

[Chalky]

K@ is sweet, innocent and chaste.

Should that not be "chased"? 

[Arantor]

So who are you and what have you done with the real K@?

[Antechinus]

K@ is sweet, innocent and chaste.

Should that not be "chased"? 

No. He doesn't run. He loves it. You have been warned.
Anyway you can easily do some basic styling with css changes, but I have to emphasise "basic". That means you can round off the corners and apply a few other little tweaks, but you can't make any browser look the way the phone does them (barring jQuery madness as mentioned earlier).

As an example, here's some stuff I've been playing with for 2.1:

Code Select Expand

/* Select elements look horrible with the extra padding, so leave them unpadded. */
select {
padding: 0;
}
/* Add some padding to the options instead. */
select option {
padding: 1px 4px;
}

input, input.input_file, select, textarea, textarea.editor {
font: 1em/1.4em "Verdana", "Arial", "Helvetica", sans-serif;
background: #fff;
outline:none !important;
border: 1px solid #bbb;
vertical-align: top;
border-radius: 3px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05) inset;
}
input:hover, input.input_file:hover, select:hover, textarea:hover, textarea.editor:hover {
outline:none !important;
border: 1px solid #aaa;
}
textarea:hover, textarea.editor:hover {
background: #fbfbfb;
}
input:focus, input.input_file:focus, select:focus, textarea:focus, textarea.editor:focus {
outline:none !important;
border: 1px solid #aaa;
box-shadow: 0 2px 5px rgba(0,0,0,0.1) inset;
}

[Antechinus]

That's part of the problem; a number of browsers don't particularly offer much support for styling select.

Most site designers that have reimplemented it have replaced it from scratch through one of the several plugins that all hide the <select> and do it with <div> but I guarantee you that it will not work properly if you try implementing it directly on top of SMF, there are too many <select> instances that do strange things through SMF (I speak from experience)

How about if you only call the jQ for some of the main ones that will give "street appeal"? Did you try that? I've been thinking about trying it myself. Not sure if it's worth the hassle though.

[Arantor]

It was actually easier to just hit up all of them and go through and fix the individual ones that don't work properly. The odd rogue one still gives us trouble occasionally, though, and it doesn't work perfectly on mobile (especially with scrolling) but it is very flexible for theming purposes should a themer wish to do so.

[Antechinus]

Hmm. Yeah I'm in two minds about them for 2.1. Had thought about it of course, being a bit of an aesthetics freak, but they're generally not a major styling item and you can get quite reasonable results just with css. I'm a bit reluctant to throw heaps of js at everything just for the hell of it.

Admittedly the way the selects were done in 2.0 isn't that great, but it's not hard to fix them up. I wanted to do it for 2.0 but was overruled (wasn't an official orange mugwump at the time).

[Arantor]

On the other hand, if you can create something that looks consistent on all devices and browsers, you can make something of it for themes too

[kat]

Should that not be "chased"? 

If only...