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
Related
I've got an ng-options multiselect list that I'm trying to append some icons before the option text with a ::before class. This works great in chrome but not Firefox. The content on the ::before seems to wipe out the option text.
.optionClass:before{
content:"::before "
}
<select multiple="multiple">
<option class="optionClass">first</option>
<option class="optionClass" label="sec" >second</option>
</select>
I'm expecting to see both "first" and "second", but in FF I can only see first. The text for "second" is hidden.
Once again, this works perfectly in Chrome, but not in Firefox.
Is there a way around this issue with just css? If not, is there a way I can leave the label elements off the options when using ng-options with AngularJs 1.x?
I found a tenuous workaround for this issue.
I created a FF bug report for this issue. One of the dev's said "This is kind of expected" but then he referenced using attr(label) appended to the content. This doesnt work for a number of reasons in the :before content (in my case because I'm display FA icons in that field) so I appended it to the :after
https://bugzilla.mozilla.org/show_bug.cgi?id=1644611
The workaround is to create a css Firefox selector and then append the label to the
:after content field using attr(label) Hopefully this doesnt result in any false positives that would display the label twice. In the limited cases I've tested so far it seems to be holding up.
#-moz-document url-prefix(){
.optionClass:after{
content: attr(label);
}
}
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
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)
Basically, I want to be able to just show the drop-down arrow and not the text-box associated to that drop-down arrow. I don't want to display the value, but the javascript onchange event will still fire if someone changes the selection.
Idea's?
Paul
Solution for Chrome only
(maybe webkit in general, but I can't test that)
I tried it in old IE7/8, doesn't work because it cuts off the dropdown to the set width as well.
Firefox doesn't show the arrow and instead cuts the text off since it left-aligns.
Solution is as follows:
Should be pretty easy to just set the width of the control via CSS and limit it to the arrow. Simple example I built for Chrome (doesn't really work in other browsers):
<select style="width:18px">
<option value="10000">Something</option>
<option value="100">Other thing</option>
<option value="1">The last option</option>
</select>
Example fiddle: http://jsfiddle.net/Fs7G5/
<select><option></select>
It does not make much sense, but it answers the question asked.
You will not find a cross-browser solution. You probably will want to set all appearances across all browsers to none, and then build a custom-styled select/option that works to meet your requirements. The JS onchange event will still fire properly even if it has a custom style.
You can read up on appearance at the MDN, but note that it isn't supported fully. An example you can utilize for the time being:
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
You will need to adjust properties such as border, border-radius, and background-color if you try to style your own solution.
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.