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.
Related
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.
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.
I want to have a radio button input but instead of mere circles I would prefer another html element (including structure) to illustrate the choices. I thought this might work with the appearance style, but it does not work (probably because the input[radio] might not contain other elements.
Is there any way of styling an input radio, so it displays another HTMLElement instead of its circle?
Why not just leave them radio buttons but make the entire image clickable with label tags?
You might want to look at Uniform. Its a nice and easy way to have complete design control over form elements. Indeed it does require JavaScript but if its not enabled by default Uniform degrades gracefully offering the standard form functionality.
Some browsers allow you to override the settings, but you are going to have to do some super CSS tricks to get it to work.
http://acidmartin.wordpress.com/2009/07/17/using-css-to-style-radiobuttons-and-checkboxes-for-safari-and-chrome/
is a good site that describes how to do what you are talking about. They use a sprite sheet and the browser specific -appearance style to change the look of the box dependent on state.
I always have a problem when making webpages using input or select boxes in CSS because the focus is mostly making it for FireFox and IE, but for some reason the text inside text boxes/form input objects are usually never properly aligned (line-height).
I'm wondering if there is a common routine for making input boxes look like they do in FireFox and IE, in Safari, because they usually look horrible once you add a touch of CSS to the element. Trying to balance out the line-height on each browser usually never works out perfectly, is there something i'm missing to make the inputs in all browsers look the same once you style it? (mostly talking about the line-height of the inner text inside the input box).
ie. Is using em instead of px a better for cross browser compatibility?
What helps a lot is using some kind of boilerplate starting point, that resets all browsers to the same base CSS (for so far possible). Specifically I've enjoyed HTML5Reset, you could just take the CSS reset file and see if it helps you.
I have this CSS Menu. It's fully functional.
But when I put it in my page inside some table cell, it blows up like this. Don't mind the silver and the blue lines, they are from the page.
Now I have debugged the page and the menu itself. No error still this weird behavior. Then I got another menu and put that in here and it showed the same error. Any idea why is this happening?
I could paste the code but I don't think anybody is going to go through 500 lines of HTML and 100 lines of CSS.
I am using the latest Firefox. IE6 shows the same behavior.
check the code here...
CSS Menu Independent in a page
CSS Menu Inside a complex page
Your "in-place" stylesheet is much longer than your "minimum" one, and contains rules that are changing the layout. In particular, do a search for "280" -- you're setting some widths to that.
In some browsers, tables get some default styles that are not what you expect. I can't recall right now, but I think one of them was align="centre" by default.
Maybe try setting the table attributes to what you want them to be explicitly?
W3Schools for table attributes.