When styling a form <select> element in Bootstrap 3, it renders an ugly button on the in Firefox on OS X:
(http://bootply.com/98385)
This has apparently been a known issue for a while, and there are a number of hacks and workarounds, none of which are very clean (https://github.com/twbs/bootstrap/issues/765). I'm wondering if anyone has found a good solution to this issue other than using Bootstrap dropdowns or extra plug-ins. I have deliberately chosen to use HTML <select>'s rather than Bootstrap dropdowns because usability is better with long lists on mobile devices.
Is this a Firefox problem or a Bootstrap problem?
Details: Mac OS X 10.9, Firefox 25.0.1
Update 12/4/13: I did a side-by-side comparison of how each browser renders the <select>'s on OS X 10.9 using Firefox, Chrome, and Safari, in response to #zessx (using http://bootply.com/98425). Obviously, there is a big difference between how the <select> form element is rendered across browsers and OS's:
I understand that a <select> tag is handled differently based on what OS you are using, as there are native OS-based controls that dictate the styling and behavior. But, what is it about class="form-control" in Bootstrap that causes a <select> form element to look different in Firefox? Why does the default, un-styled <select> in Firefox look okay, but once it gets styled, it looks ugly?
You can actually change the grey box around the dropdown arrow in IE:
select::-ms-expand {
width:12px;
border:none;
background:#fff;
}
Building on the excellent answers by rafx and Sina, here is a snippet that only targets Firefox and replaces the default button with a down-caret copied from Bootstrap's icon theme.
Before:
After:
#-moz-document url-prefix() {
select.form-control {
padding-right: 25px;
background-image: url("data:image/svg+xml,\
<svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
<path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
</svg>");
background-repeat: no-repeat;
background-position: calc(100% - 7px) 50%;
-moz-appearance: none;
appearance: none;
}
}
(The inline SVG has backslashes and newlines for readability. Remove them if they cause trouble in your asset pipeline.)
Here is the JSFiddle
Actualy you can do almost everything with dropdown field, and it will looks the same on every browser, take a look at code example
select.custom {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
padding-right: 25px;
background-repeat: no-repeat;
background-position: right center;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
select.custom::-ms-expand {
display: none;
}
https://jsfiddle.net/x76j455z/10/
There is a slick-looking jQuery plugin that apparently plays nice with Bootstrap called SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/). The thing I like about it is that it allows you to trigger the native select box on whatever OS you are on while still maintaining a consistent styling (http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox). Oh how I wish Bootstrap provided this option!
The only downside to this is that it adds another layer of complexity into a solution, and additional work to ensure compatibility with all other plug-ins as they get upgraded/patched over time. I'm also not sure about Bootstrap 3 compatibility. But, this may be a good solution to ensure a consistent look across browsers and OS's.
I'm sure -webkit-appearance:none does the trick for Chrome and Safari.
EDIT : -moz-appearance: none should now work as well on Firefox.
This is the normal behavior, and it's caused by the default <select> style under Firefox : you can't set line-height, then you need to play on padding when you want to have a customized <select>.
Example, with results under Firefox 25 / Chrome 31 / IE 10 :
<select>
<option>Default</option>
<option>Default</option>
<option>Default</option>
</select>
<select class="form-control">
<option>Bootstrap</option>
<option>Bootstrap</option>
<option>Bootstrap</option>
</select>
<select class="form-control custom">
<option>Custom</option>
<option>Custom</option>
<option>Custom</option>
</select>
select.custom {
padding: 0px;
}
Bootply
This is easy. You just need to put inside .form-control this:
.form-control{
-webkit-appearance:none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
This will remove browser's appearance and allow your CSS.
With Bootstrap 4+, you can simply add the class custom-select for your select inputs to drop the browser-specific styling and keep the arrow icons.
Documentation Here: Bootstrap 4 Custom Forms Select Menu
I found two potential ways of solving this specific problem:
Use Chosen
Target mozilla browsers using #-moz-document url-prefix() like so:
#-moz-document url-prefix() {
select {
padding: 5px;
}
}
We have been using the plugin bootstrap-select for Bootstrap for dtyling selects. Really works well and has lots of interesting additional features. I can recommend it for sure.
I am using Chosen.
Look at: http://harvesthq.github.io/chosen/
It works on Firefox, Chrome, IE and Safari with the same style. But not on Mobile Devices.
You can use jquery.chosen or bootstrap-select to add style to your buttons.Both work great. Caveat for Using Chosen or bootstrap-select: they both hide the original select and add in their own div with its own ID. If you are using jquery.validate along with this, for instance, it wont find the original select to do its validation on because it has been renamed.
Related
I have set border-radius property for button in my css file:
border-radius: 10px;
Everything is okay in chrome but on Safari it looks ugly.
Chrome: Safari
Try " -webkit-border-radius: 10px "
I found an answer for my question! You should add only one line:
-webkit-appearance: none;
That's it.
The appearance property is used to display an element using a platform-native styling based on the users' operating system's theme.
I got a quantity box where you can change the amount of products in your basket.
It looks fine in all browsers, except when I view the website on my iPad 1. It has weird rounded corners there.
I found here that you had to use
-webkit-appearance: none;
On input in css, but that's not doing it for me.
This is what I got in my css:
input{
-webkit-appearance: none;
}
Any ideas?
try -webkit-border-radius:0px;
Doesn't matter what I do, using Mac OSX 10.9.2 and Chrome Version 33.0.1750.152, padding, background-color, nothing works. I am really just wanting to apply a padding-top and padding-bottom of 5px on a select element, works everywhere cept Chrome on a MAC OSX. What gives? How to do this globally on all platforms??
You need to apply -webkit-appearance:none; when adding CSS to select elements in webkit browsers.
DEMO http://jsfiddle.net/XxkSC/3830/
There is better option to achieve a natural design:
height:30px;
background:#ffffff;
DEMO JSFiddle
p.s
Vector's answer is hiding the arrows on the right side.
Add the following property to your select in your css file:
-webkit-appearance:none;
If you are using bootstrap, you can add class custom-select:
<select class="form-control custom-select">
After adding it, you can eventually adjust height by adding line-height property to css:
select {
line-height: 1.3;
}
https://getbootstrap.com/docs/4.1/components/input-group/#custom-select
This solution is not only for select but also for input and textarea.
select,
textarea,
input {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
I also applied the solution for all browsers, so it should work the same way everywhere.
!important did the trick for me, but it will depend if you will need it or not.
i use Allegro fonts for top menu and got problem when i hover on it the color not display full width in Chrome and Safari :(
you can test on this link
http://preview.86solutions.com/fairpart
There is something wrong with your font I guess.
When you add some more padding-right to the element it looks fine.
.menu a {
color: black;
padding-right: 20px;
}
see it yourself:
Add a border to the element and it will cut off on the right side.
Looking okay in both chrome and IE.I don't know what version are you using now, I have checked this demo in chrome 19.0.1084.82 and IE8 and IE9.I have seen your code and everything looks good.
BUT, IE does not support the font-family inherit property.If you still have the problem you should modify your style.css like this :
.menu a:hover,.menu a:active {
font-family: "Allegro"; /* because IE doesn't suprort inherit */
text-decoration:none;
color:#c4c04d;
}
Hope it helps !
I have been pulling my hair out trying to get Chrome to style my search input with a background image. Firefox has no problem, but I fear it's because it treats the input as a regular text input. Is this simply not possible?
Try this as a demo:
<input type="search" />
input[type="search"] {
background: transparent
url(http://google.com/intl/en_ALL/images/srpr/logo1w.png) no-repeat 0 0;
}
If it worked correctly, it should put Google's logo (or part of it) as the background image for the "Search" input. But as you will see when you look at this in Chrome, it DOES NOT WORK. Any ideas, or is this just one of HTML5's quirks? :\
You can get Chrome (and Safari) to play along better with your styles on an HTML5 search field (including background images) if you apply this in your CSS:
-webkit-appearance: none;
You may also want to change -webkit-box-sizing to...
-webkit-box-sizing: content-box;
...since it appears that Webkit defaults this to the border-box value (basically the old IE5 box model).
Be warned, there's still no (apparent) way to have any effect on the position/appearance of the field-clearing button, and since only Webkit generates that button, you may find some new cross-browser annoyances to deal with.
Complete solution to remove all extra design caused by browser. This will change the search field to normal input field
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]{
-webkit-appearance: none;
-webkit-box-sizing: content-box;
outline:none;
}
Like you said, Mozilla treats search inputs as text. For Webkit browsers however (Chrome, Safari), the search input is styled as a client created HTML wrapper for the internal Webcore Cocoa NSSearchField. This is what gives it the round edges and the 'x' button to clear itself when there is text within it. Unfortunately it seems that not only are these extra features inaccessible by CSS/JS for the time being, but it also seems that there's no W3 specification for what CSS properties can be applied to this element as well as other new HTML5 elements. Until there is such a specification I wouldn't expect to have consistent behavior.
The cancel button can be styled with the following
input[type="search"]::-webkit-search-cancel-button {
/* Remove default */
-webkit-appearance: none;
/* Now your own custom styles */
height: 10px;
width: 10px;
background: red;
/* Will place small red box on the right of input (positioning carries over) */
}
Styling can be removed using
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
http://css-tricks.com/7261-webkit-html5-search-inputs/