I created a Dropdown with
.some_class {
border: 1px solid #7f9db9;
}
<select id="some_id" class="some_class" size="1">
<option selected="selected" value="1">User1</option>
<option value="2">User2</option>
<option value="3">User3</option>
</select>
and it is working fine in the most cases. The Problem is, that sometimes huge empty spaces appear between the listed elements in the dropdown when using Chrome. It looks like something increased the line distance between the element or something like that.
The weird thing is that this bug does not appear in every chrome if i test it with different users / at different computers.
Is it possible that there are any settings in the browser which cause this problem?
The extra spacing is a "feature" introduced in Chrome 59. If it thinks you have a touch device, it makes the options taller. Currently the only way to disable this feature is to disable all touch devices.
https://bugs.chromium.org/p/chromium/issues/detail?id=739196&q=dropdown&colspec=ID%20Pri%20M%20Stars%20ReleaseBlock%20Component%20Status%20Owner%20Summary%20OS%20Modified
Related
I keep running into these super strange bugs on safari. In this one, the option value is blank on MacOS Safari or iOS Safari. I've tried all sorts of css styling to bring it back into the light, but nothing seems to do the trick.
My google searches have also proven to be dead ends.
option {
border:1px solid black;
}
<span>
<option value="1">1</option>
</span>
In IE 10 and 11, a rendered options list of a <select> element doesn't seem to be considered a child of its parent element, at least as far as transitions are concerned.
Assume we have a <div> that is styled using CSS transitions such that on hover, it slides right 100px and off hover, it slides back.
If we add a <select> element inside the <div>, it still slides right on hover. However, if I click the <select> and hover inside the list of <option>'s, the <div> slides back into its original position as if I've moved the cursor outside the <div>, rather than staying transitioned. The only explanation for this I can come up with is that somehow, IE is interpreting the select list or the options themselves as being outside of the parent element.
This snippet shows how it plays out. Try it in Chrome/FF/Safari vs IE10+.
.test {
position: absolute;
left: 0;
transition: left 1s;
padding: 20px;
border: 1px solid red;
}
.test:hover {
left: 100px;
}
<div class="test">
Move me
<select>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
<option>Test</option>
</select>
</div>
I've tried this same example in Chrome, Firefox, and Safari and I get the expected behavior - the <div> stays transitioned even when my cursor is on the <select> list. I only see it slide back in IE and I'm thinking it's a browser bug.
If this is somehow intentional by the developers of IE, is there some way to style the elements such that my transition still works?
UPDATE 12/10/14 - At the time of writing, the only two select replacement libraries I found that implement the options list such that it is a child element of the select's parent are Selecter and Chosen. Ended up going with Selecter.
In Internet Explorer we actually implement the dropdown list as a separate window. I am able to see the issue in IE 11 though, and can certainly see how that is frustrating. The good news is it appears we have already addressed this, and shipped the code on http://remote.modern.ie (run from Mac OS X, or Windows).
Expect the change in behavior to land in a future build of IE.
Looking for a solution for a problem I'm having.
I am making a responsive website that has a select tag to allow users to pick which category of blog posts they want to display the html is just a basic select tag.
<select name="">
<option value="">Sort by Category</option>
<option value="">test</option>
<option value="">Test</option>
</select>
I then have styled the select tag with the following code
.portfolio-thumbs select {
width:100%;
padding:0.625em;
border:none;
background:#33c3e2;
color:#fff;
font-size:1.125em;
}
select {
-webkit-appearance: none;
border-radius: 0;
}
This works fine on Windows phone but on Iphone, Blackberry and Android the arrow for the select box does not display. Has anyone encountered this problem before and know what i am doing in my CSS to disable the arrow from displaying or have a solution to get the arrow back whilst still being able to style the select how i want.
The -webkit-appearance: none; line is telling webkit browsers (iPhone, BB and 'droid) to not display the default <select> appearance. Removing this line will restore the arrow.
As mentioned in the comments, <select> is a real pain to style. The only realistic option if you want real control of how it looks it to use a replacement technique as mentioned by #AdamMarshal.
Alternatively, if you absolutely must use a <select> and -webkit-appearance: none;, add a background image of an arrow.
You can add a class to select element and define "-webkit-appearance: auto" or "-webkit-appearance: initial" - this will also override user agent stylesheet (default browser's value for webkit appearance)
I'm having trouble setting the background color (and text color) for the options in a <select> list in Google Chrome.
Seems to work fine in Firefox:
But not in Google Chrome:
Closed:
Open:
Code:
<html>
<head>
<style>
select
{
background:yellow!important;
}
option
{
background:red!important;
}
.c1
{
background-color:green!important;
color:red!important;
}
</style>
</head>
<body>
<select>
<option class="c1">nice long option name</option>
<option class="c2">nice long option name</option>
<option class="c3">nice long option name</option>
<option class="c4">nice long option name</option>
<option class="c5">nice long option name</option>
</select>
</body>
</html>
I wonder if Google Chrome is using it's own elements or perhaps elements of the host operating system to render the select box and perhaps this is why it doesn't work? Perhaps it's a good thing because those colors look fairly horrendous, but it would be nice if Chrome offered a little bit more control.
Try:
select { -webkit-appearance: none; }
Maybe that should help you.
If not.. than probably Chrome does not support it.
Yes, -webkit-appearance do the job well.
But, don not apply this rule on select element, assign it to option/optgroup:
option, optgroup { -webkit-appearance: none; }
This solves "white text on whitebackground" in Chrome on Ubuntu.
Hope, this help somebody.
I have ran into this issue before as well CWD. Seeing as Browser's have a default value with Forms and Form Elements sometimes you need to override the Browsers Setting via JavaScript/jQuery.
Check out this link: This may help with styling.
http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements
In general, trying to style and elements is more trouble than it's worth. Cross browser support is horrendous. You will generally end up using a JS solution. If you're targeting one specific browser, you might be okay, but I'd just let browsers render and elements the way you want.
That said, if you're looking for a good JS solution to this, I've used Chosen and found it worked great. It will swap out your desired element with a div and li items, which you can style to your heart's content.
This has been an ongoing issue with sites using a dark theme. I found that applying this rule in the main css file solves the issue for me:
select { -webkit -appearance:none }
Hope it helps someone.
I'm working on an multi select, the select part works fine on all browsers but the styling is only working in firefox. Its the following link:
http://jsfiddle.net/PbYFT/119/
So my question is, how can I get the styling the same in other browsers as it is in Firefox.
Kind regards
styling forms is not easy at all.. every browser render the input and selects in different ways, some allow styling (like FF), some don't (like chrome)...
So you could save you a headache if instead of adding a margin you add white spaces before the content:
<div>
<SELECT NAME="categorie" MULTIPLE SIZE=21 id="multiselect">
<OPTION VALUE="telefoontoestellen">-Telefoon toestellen
<OPTION VALUE="smarthphone"> -Smarthphone
<OPTION VALUE="iphoneapple"> -Iphone / Apple
hope this helps