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)
Related
I'm having an issue with the select drop down button in twitter bootstrap. It's happening in the two browsers I have installed on the machine (IE11, Chrome) and it's not just restricted to 'my sites'.
Here is a screenshot of the bootstrap website (OS: Windows 8.1 Broswer: Chrome) (http://getbootstrap.com/css/#forms-controls):
I have checked the console window and all resources are loading correctly.
Could anyone help me with why this is happening / steps to resolve?
TL;DR: you can't use CSS to change the icon. You'll have to use a library that implements a select-like control using HTML and JavaScript (at the expense of mobile-friendly selects on iOS and Android).
The icon displayed in <select> is determined by the user's browser or operating system. You can't change it using CSS.
Select display in Chrome on a Mac:
Select display in Chrome on a Mac with some styles removed:
I removed line-height, background-color, border, border-radius, and box-shadow. Note that the arrow has changed even though I didn't change any related style.
Select display in Chrome on Windows:
Notice that the icons are different, even though the code is the same.
Now what?
Although select isn'g very styleable, there are many libraries that provide a very customizable implementation of a select-like control. I like to use Bootstrap-select.
This library creates a <div class="caret"></div> that can be styled to change the icon. For example after including the Bootstrap-select JavaScript, the following code:
HTML
<select class="selectpicker">
<option>Mustard</option>
<option>Ketchup</option>
<option>Relish</option>
</select>
CSS
.caret{
color: red;
}
Gives me this display:
You'll lose mobile display, though:
Using a custom library will disable the mobile-friendly way iOS and Android implement selects, so make sure a custom icon is important enough to you before proceeding.
I found a solution to this, add this CSS and put 'form-override' class on each select dropdown:
.form-override {
appearance: auto !important;
}
I'm not sure why this works or why it's needed, just wanted to share how I was able to fix this problem. For me it seems to be sporadic, sometimes the problem occurs and I need this style setting to fix it, and sometimes it does not need this fix.
Use for select
select {
-moz-appearance: none;
background: rgba(0, 0, 0, 0) url("../images/dropdown.png") no-repeat scroll 100% center / 20px 13px !important;
border: 1px solid #ccc;
overflow: hidden;
padding: 6px 20px 6px 6px !important;
width: auto;
}
You can't style the <select> element itself at this moment. Every browser applies its own styling to most form elements.
So you can create your own custom select by hiding the original one, create markup, e.g. div with ul + li and live it up with javascript.
OR
If you don't mind using jQuery, try these libraries:
SelectBoxIt
Select2
Chosen
Bootstrap select
jquery-selectBox
jQuery UI
I have experienced that behavior with IE on Windows 8.1. For some reason IE renders the arrow differently as soon as you start to style the select element (which bootstrap themes usually do). Even something as simple as setting the background color triggers this behavior.
The only solution I've found so far is to style the arrow as needed. You can use the ::-ms-expand pseudo element for that. The following css rule should restore the "default" look:
select::-ms-expand {
background-color: #fff;
border: none;
}
I am developing a mobile website and testing on both iPhone and android phone.
I changed the appearance of select boxes on the page using CSS.
This displays good in the iPhone browser, but in Android does not apply the styles correctly.
The original dropdown arrow remains present (and is stretched vertically due to the height property).
Is there any way of telling the browser how to style this element on a android device? Or is it not supported?
Here is a sample of my code:
HTML:
<div class="filter-group">
<select class="bigInput" id="f_eventWho" name="f_eventWho" tabindex="1">
<option id="f_public" selected="selected">For Everyone</option>
<option id="f_private">By invitation</option>
<option id="f_both">All Gatherings</option>
</select>
</div>
CSS:
.bigInput
{width: 125px;
height: 50px;
background-size: 15px;
background: rgb(159, 209, 225) url(../img/small_down_arrow_20.png) no-repeat right;
border: none;
margin: 5px;
font-size: 14px;
}
There is no consistent way to style native selectboxes in browsers, let alone in mobile.
The best workaround I've found is to create an HTML dropdown that emulates the selectbox behavior - I highly recommend SelectBoxIt if you're using JQuery: http://gregfranko.com/jquery.selectBoxIt.js/
All you have to do is call $('select').selectboxit(); and it replaces all select boxes on the page with stylable html elements that behave the exact same way. Best of luck!
The best solution is to not try and style select elements, especially not on mobile devices.
Doing so is both damaging to usability and performance, it's raising your middle finger to visitors and letting them know you really don't care about them at all.
Please try and justify the enormous overhead (please look at what a lib like selectBoxIt will do to page-weight) you will be adding against the benefit you will provide to visitors (which is zero, at best).
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.
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