I know about:
#-moz-document url-prefix()
But how about the inverse? Specifically, I'm having an issue with some mobile devices adding a border radius to text input elements which I don't want. If I set border-radius: 0 Firefox renders it like this:
Which just looks terrible. I'd just like to be able to apply a rule to everything but not Firefox since it seems to be very picky about messing with form element styles.
Is this what you're looking for perhaps? I use this reset for webkit browsers that add that border-radius, this does not affect FF:
input[type="text"] {
-webkit-border-radius: 0; }
Related
This CSS rule in bootstrap.min is causing a dotted outline to appear on the left and bottom edge of buttons in IE 11 (IMO it looks terrible, like some kind of graphics glitch), but it does not appear at all in Firefox or Chrome:
.btn.active.focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn:active:focus,.btn:focus{
outline:thin dotted;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px
}
Why is outline specified 3 times, and how is IE handling it differently than Chrome and Firefox?
By the time, you might get the solution for your question.
I have used below code to fix my IE10 & IE11 styling issues. These are the conditional styles for IE. This could be useful for future references.
#media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
button:focus{
outline:1px dotted #ccc;
}
}
I just had to deal with this stuff :/
You have 2 different properties here: outline, and outline-offset.
For each property, the last value that a browser understands is what will be applied. So, for the property outline, Chrome and Firefox understand the value 5px auto -webkit-focus-ring-color;, which comes after the value thin dotted, so Chrome and Firefox apply the value 5px auto -webkit-focus-ring-color to the outline property. IE does not understand that value, so it applies the value thin dotted.
IE does not support outline-offset, which is why you see the outline on the left and bottom edge but not the rest. To get the outline to show all around, I added a margin.
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.
It looks the way I like in chrome and safari. but it looks very strange in firefox. It appears to be cut off.I wonder if there is better way of archiving the same results as in chrome and safari for this other than use an actual image of square box. Any ideas? Hacks?
http://jsfiddle.net/vf6gh/
.square {
border:1px solid #0C6DBE;
background-color:#4293D9;
padding:5px;
}
<img class="square"></img>
Firefox applies some CSS to broken <img> tags:
img:-moz-broken:before,
input:-moz-broken:before,
img:-moz-user-disabled:before,
input:-moz-user-disabled:before,
img:-moz-loading:before,
input:-moz-loading:before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken:before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled:before {
content: -moz-alt-content !important;
unicode-bidi: -moz-isolate;
}
If you're really planning to use <img> to simply show an square as you want, rethink it. Those tags were not made for this, and Firefox is a proof of this.
For knowledge: user-agent CSS marked with !important cannot be overriden.
There are buttons on my website that look overly skinny in Chrome compared to Firefox. The button's HTML looks like: <button name="shutdown" type="submit" value="df" class="boton"> Press </button>
My CSS attempt looks like:
.boton {
font-size: 17px;
color: #000;
background: #ee3333;
background: rgba(225, 50, 50, 0.6) !important;
font-family: lucida console;
border: 1px solid #FF4444;
padding: 2px;
-moz-border-radius: 7px;
border-radius: 7px;
cursor:pointer;
}
.chrome .boton
{
padding: 5px !important;
}
I'm not sure if I'm doing this right. ".boton" does indeed change the style of the button, but the padding doesn't change in Chrome. What's wrong here?
The reason that the padding isn't applying to the element is due to the fact that there is no chrome class assigned to any element. There are various hacks around certain Vendor-Specific styles, see this article, but no browser applies a class of .chrome or .moz or anything like that.
However, to achieve more "horizontal" padding, you can use the -webkit-padding-start(padding-left) and the -webkit-padding-end(padding-right). Currently I do not believe there is full padding, or vertical padding for these yet. Be sure when using these to write the -webkit-padding-start, or whichever rule you use, after your padding rule. Otherwise the latter will overwrite the former and both will be lost.
Unless you've also added some browser sniffing that adds the class .chrome etc. to the body that class has no effect.
On the other hand the box model of Firefox and Chrome is not radically different, but the defaults for padding, border, margins etc. may be different. Just explicitly set those values and they should most likely render the same (give or take a few pixels because of different rounding errors). You should not need to add custom css for each browser (but if you use experimental css features like -moz-border-radius and -webkit-border-radius with vendor prefixes you should use all of them in at the same time; the others will ignore the unknown properties).
The different versions of IE (Internet Explorer) do have a radically different box models, and if you cannot get some version of IE to render something correctly with the standard css you should use conditional comments to include IE specific css overrides after the main css file.
Although it is not good practice, I am looking for a CSS hack to target Palm webOS.
The problem is that Safari 3+ is awesome, and I can do some things like gradient background animations on text, but only in Safari.
Right now I use #media screen and (-webkit-min-device-pixel-ratio:0) {} and it works like a charm, no Opera, Firefox, or whatever, because if I set the background to the image as I do in Safari they will all be ruined.
But Palm's browser is based on webkit, and it uses the rules inside, and Palm's browser doesn't support text backgrounds so all I get is the image moving, no text.
I would prefer a CSS hack, but if need be a Javascript one will do.
Easiest way I've ever foundof targeting browsers is the CSS Browser Selector plugin. You have one CSS file and tell it to target browsers with a selector like
.ie .myelement div
{
border: 1px #ccc solid;
}
.webkit .myelement div
{
border: 1px #f0f dashed;
}
Works great for me!
Hope it helps you out.