I have a select box where each option has the potential to be very long. On desktop it's fine, but on mobile the text gets cutoff at the end of each line with an ellipsis. I need to be able to show the full text, or else the options may not be clear to my users. If I can make the text wrap rather than cutting off that would be fine, but I don't know how to accomplish this since I'm not sure how the iPhone handles select elements.
Select options on iPhone
According to this StackOverflow answer, there is no way to change the styling of <select> elements on iOS, as their display styles are built into the browser and not modifiable via CSS.
This answer suggests that you can use a customizable replacement such as Chosen if you would like more control over the style of your <select> boxes.
Apparently Chosen doesn't support iOS. A comment on another answer recommends Selectize.js as an iOS-compatible replacement.
Related
EDIT: See bottom for screen shots:
I'm just wondering if anyone has come across a similar issue. On my machine, Windows 8 and latest version of Chrome, my select box options all look the way I would expect in terms of vertical spacing. On the developer beside me, also running Windows 8 with the same version of Chrome, the select box options appear to have 5px to the top and bottom of padding. The code is on our development server so we're accessing the same files.
Here's a jsfiddle reproducing the issue on the other developer's machine: http://jsfiddle.net/3etfP/
And here's a test case (same a jsfiddle):
<style type="css">
.select {
padding: 3px;
color: #000;
}
</style>
<div>
<select name="testSelect" id="testSelect" class="select">
<option value="-1">Select One</option>
<option value="0">No</option>
<option value="1">Yes</option>
</select>
</div>
Some other details that may be of use:
Both running Windows 8.0 64bit
Both using Desktop mode
Both using Version 30.0.1599.101 m of Google Chrome
Using the following Chrome extensions:
URL-alizer (both)
Google Hangouts (both)
Right inbox for Gmail (me)
Any.do (other dev)
Quick Notes (other dev)
Google Docs (both)
Please let me know if there are any details I've missed.
Thanks
Select with padding:
Select appearing normally:
Being that it's the same OS and same browser I would look into the user stylesheets:
Windows: \User Data\Default\User StyleSheets\custom.css
Linux: ~/.config/chromium/Default/User StyleSheets/Custom.css
(I know you're both on Windows, just covering bases for readers)
Past that I would use the element inspector to check for differences after the page is rendered. A CSS property that always gets in my way with padding, etc., is box-sizing.
Scott,
If this is something really important, you could mimic the behavior of a select with a div and have better control. That being said it may not be padding, have you tried setting the margin: 0 on the <option> elements?
.select option {
padding: 0;
margin: 0;
}
Most elements have their own padding/margin in different browser. I would recommend using a CSS reset if you want uniform design across all browsers (see here). It could also be that either of you have Chrome zoomed in. Both of you should hold control and press + or - to make sure the zoom is set to 100%.
Edit:
I think you are in for it unfortunately.
See Chris Coyier's article Dropdown Default Styling, especially the latter part of the article, most of which is quoted here.
What about the dropdown itself?
As in, the thing that shows the choices when activated. As far as I
know, there is no way to style these in any browser. Not even bold or
italic. The closest thing to style you can get is grouping them by
using . This is probably mostly a UI thing, but it might be
a security thing too. You wouldn't want people doing tricky things
with fonts that make it unclear what option is selected.
What if you want complete design control?
First, try everything you can to make that not necessary. Default form
elements are familiar and work well. Making a dropdown menu match the
font and colors of your brand isn't usually necessary and is more
likely obnoxious at best and bad UX at worst.
If you decide that it's absolutely a good idea to customize a
dropdown, then you should use JavaScript to:
Accessibly hide the original select.
Rebuild the select with custom markup (probably a definition list), that you style how you want.
Replicate all the functionality that default selects have, which include: keyboard events like up and down arrow keys and return to
select, scrolling of long lists, opening the menu upwards when select
is against bottom of screen, to name a few.
For mobile, trigger the opening of the native select menu, because that functionality is just about impossible to replicate. For example,
the iOS flipwheel.
You might want to consider a "clickthrough" style for desktop as well. Have the select be custom styled by default, but when you click
it, it opens the native dropdown menu (in place). When you select an
option it displays the custom styling again with the choice shown.
It's a lot of work and easy to screw up, so beware.
Joshua
I've a CSS dropdown menu containing a select box that extends beyond the menu's
bottom border when opened. Subsequent clicking on a select option that lies beyond
the menu's bottom border causes the menu to close (i.e., ":hover" no longer applies
once the select closes).
Is there a way around this? It'd be great if I could force the select to "drop up",
but I've not found a way to force this to happen.
Any ideas?
One solution would involve limiting the height of the select, so that it doesn't jut out, or making it always drop-up. This answer discusses those options a bit.
Selects aren't typical HTML elements. We're pretty restricted in styling them, and I'm not entirely sure how much control we'll have even when the the shadow DOM is more widely accessible (I've been meaning to test!). The reason of my uncertainty is that it seems that some browsers, like Safari and Chrome, appear to use OS APIs for their selects, whereas other browsers, like Firefox, clearly use the Shadow DOM.
With all of this said, I think the easiest solution for you would be using a Javascript select plugin to completely get around this issue of modifying the select itself.
The idea of using Javascript is pretty simple. You'll hide the actual select and insert new DOM elements (like divs) to replace it. These divs can be styled to look like a select, and programmed to behave as you'd prefer the select to. And any changes to this facade are applied to the real, hidden select, so that forms can be submitted and manipulated as usual.
Bootplus is just one example of a plugin that has a drop-up. It'd be fairly easy to pull that component from the code.
Chosen is another good plugin that I'm pretty sure lets you limit the size of the dropdown as another alternative.
Or you could run some Google searches and find more!
In short: The current best option for cross-browser control over how a select displays and behaves is using a Javascript plugin.
The issue I'm having is options in a select box flow over the edge of the page (hiding the scroll bar). I'm trying to restrict the width of the options using CSS. Please say if there is a better way...
This worked fine in IE8, but not in IE9. Seems okay in Firefox as well. Chrome ignores it as well, but makes sure the options don't overflow off the page (like IE9).
I know the non-resizing of these was a bug that was fixed for IE9, but it is necessary (sometimes) to set a width limit.
http://jsfiddle.net/jdb1991/Vt8Bd/
Browsers implement select elements differently, often using built-in routines that are more or less immune to CSS. It is not even clear what you, or others using very long option texts, would like to happen—truncation, line-wrapping, horizontal scrolling, or what?
The problem is best avoided by using concise option texts. They are supposed to be visible names for alternatives, not novels. If very long names are really a necessity, use a set of radio button instead of select.
I'm writing a web app. It's only ever going to be used with IE8, so I'm not concerned with the behavior of any other browsers here.
So: I know how to custom-style a button using CSS properties e.g. background-color, border, and so on. However, when you apply styles that way, the resulting button looks like a blocky table cell, nothing like the nice, glassy-looking button that IE8 renders by default.
Is there some way to add a tint to the nice glass-looking button? I.e., it looks just like it normally does, but with a red outline instead of blue, and a red highlight on mouse-over?
Or is this something I'm going to have to do by hand with images? Again, IE8-specific methods are perfectly acceptable.
Thanks!
-dan
There isn't really a filter that will get you as close to the default in IE, though you can get pretty close using the button tag and standard css. It will not look the same in all versions of IE though.
Here's the filter reference though if you want to try other things.
Regardless of browser, one of the quickest, easiest, most widely tested methods for styling buttons via markup is Jquery UI's button It's a matter of adding a few tags to the class element, and you've got a button based on an link, button, or input field. For styling, you can handle styling via CSS, or via the very well done ThemeRoller option, where you can control everything from text size to background type via a simple gui interface--and you can change on the back end or even the user end on the blink of an eye, even via drop down.
One caveat, since IE is non-standards compliant, rounded buttons fail gracefully to square--with proper styling.
I realize that you have determined that you can use a proprietary solution for IE, and in your case it might be just fine over the long term. But in my experience, that's a really dangerous path to follow. What if the actual long term is longer than your anticipated "long term?" You're specifying that it's acceptable to be proprietary to a browser that's well behind the accepted standards, is already a version behind, and uses unsupported (by universal standards) solutions to solve problems. Conceivably, that version is going to get tougher and tougher to find, and if Microsoft holds true to their patterns, once you install IE9 it will effectively render your computer difficult of downgrading. And, I can't emphasize enough that IE's market share is dropping like a rock, which is scary considering basically 95% of the machines out there have it pre-installed. All it's going to take is one overzealous IT director with "security in mind" to render your programming efforts moot. Sorry for the rant, but IE proprietary code has bit me hard more than a few times...
I'd have to double-check, but you should be able to use a combination of a background color and use a transparent PNG or GIF as the "background image" to add the highlights.
All things being equal, I've rather embraced the flat, square button - finding ways to make it work well with the design - but then again I've always been a straight line, square edge kind of guy. :)
As others have mentioned, you do want to be mindful (within reason) of what you may have to handle. It's quite possible that before the next re-write you're going to have to deal with IE9 - writing code that works well in IE8 and IE9 would be the most prudent approach.
Have a look at http://www.webdesignerwall.com/demo/css-buttons.html and also http://css3pie.com/.
Combining those you can get nice looking buttons in IE as well..
I am on a mac running firefox. I have a website and the select dropdown box has a funny style:
When I look at other websites in the same browser they look different:
Or even at my code here: jsFiddle
What could possibly be causing my website to display how it is because as I understand it you have very little control over how select boxes are displayed?
Thanks
Are you using CSS to format <select>? Or a CSS reset?
If you use some rules like border or background, the default style disappears and you get this grey box..
You should remove those CSS settings.
The default dropdowns styling vary across browsers. Unfortunately there's no real CSS way to restyle them.
That said, you could use a jQuery plugin such as this: Custom Select Box which I've used in the past to good effect.
The second example is displayed using system presentation of select. The first one does not look like a system select because likely some custom styling applied which does not more than just resets the system presentation.
It is generally not possible to style HTML input fields other than text fields effectively. To do that developers usually re-implement input controls using complex HTML, this is suggested by Ian Devlin.