Is there any method to override the default styles of Firefox with the default styles of Chrome?
there is a way for override firefox default property ,
you can follow this github to get some default property of browsers
and you can override chrome default style with the webkit --webkit
and mozila provide it with --moz
follow link
https://github.com/sw4/revert.css
and override firefox style
i dont know on firefox browser how can exact do this but i know you can override chrome style with some override on chrome kit on firefox is the sameway with overriding moz attribute create a simple css file link it to your html then add attribute you need to override or change like that `
::-webkit-scrollbar {
width: 15px;
height: 15px;
color : "red"!important
}
for chrome styles and something same for firefox
scrollbar {
/* clear useragent default style*/
-moz-appearance: none !important;
}
/* buttons at two ends */
scrollbarbutton {
-moz-appearance: none !important;
}
/* the sliding part*/
thumb{
-moz-appearance: none !important;
}
scrollcorner {
-moz-appearance: none !important;
resize:both;
}
` but my code is not exact true need to more explain about "-moz-appearance"
Related
I recently built an app, but after deployment, I noticed that Safari seems to be loading css differently. Everywhere I have a type="button", safari adds an odd white box around the element. It looks terrible. I've looked around on the internet and found this:
input[type="text"],
input[type="button"] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
It's the closest I've come to finding a solution, but it doesn't work.
Site: timetrackers.net
I'm guessing you're talking about Safari's default :focus styling.
You can use this CSS to get rid of it:
input[type="text"]:focus,
input[type="button"]:focus {
outline-width: 0;
}
Browsers have added additional functionality/styling to input[type=number] in the form of up and down buttons.
I was able to remove this styling in Chrome since we're able to view the shadow DOM and figure out an element's corresponding identity.
However, Firefox is another story. Is anybody aware of any way to remove the up and down buttons on input[type=number] in Firefox?
I came across this post, but the extension wasn't sufficient.
/* For Firefox */
input[type='number'] {
-moz-appearance:textfield;
}
/* Webkit browsers like Safari and Chrome */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
Since a couple of versions (since 29 I think) Firefox adds spinner buttons to a number input. But they do not fit into my Bootstrap powered website. Is there a way to style these buttons so they look less ugly.
I don't think you can style them, but maybe hiding them will already help:
/* Hide spinners for Firefox */
input[type=number] {
-moz-appearance: textfield;
}
/* Hide spinners for Chrome */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
I have select element, i want to remove the arrow, then i can add other icon..
i can do that for Firefox Safari and Chrome,
but this didn't work on IE9.
.styled-select select
{
border: 0 !important; /*Removes border*/
-webkit-appearance: none; /*Removes default chrome and safari style*/
-moz-appearance: none; /*Removes default style Firefox*/
background: url('select_icon.png') no-repeat;
background-position: 179px 7px;
text-indent: 0.01px;
text-overflow: "";
color: #FCAF17;
width:200px;
}
SEE Fiddle on IE9.
all what i need is remove the arrow in ie9
Please JSFIDDLE answer.
In IE9, it is possible with purely a hack as advised by #Spudley. Since you've customized height and width of the div and select, you need to change div:before css to match yours.
In case if it is IE10 then using below css3 it is possible
select::-ms-expand {
display: none;
}
However if you're interested in jQuery plugin, try Chosen.js or you can create your own in js.
I would suggest mine solution that you can find in this GitHub repo.
This works also for IE8 and IE9 with a custom arrow that comes from an icon font.
Examples of Custom Cross Browser Drop-down in action: check them with all your browsers to see the cross-browser feature.
Anyway, let's start with the modern browsers and then we will see the solution for the older ones.
Drop-down Arrow for Chrome, Firefox, Opera, Internet Explorer 10+
For these browser, it is easy to set the same background image for the drop-down in order to have the same arrow.
To do so, you have to reset the browser's default style for the select tag and set new background rules (like suggested before).
select {
/* you should keep these firsts rules in place to maintain cross-browser behaviour */
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background-image: url('<custom_arrow_image_url_here>');
background-position: 98% center;
background-repeat: no-repeat;
outline: none;
...
}
The appearance rules are set to none to reset browsers default ones, if you want to have the same aspect for each arrow, you should keep them in place.
The background rules in the examples are set with SVG inline images that represent different arrows. They are positioned 98% from left to keep some margin to the right border (you can easily modify the position as you wish).
In order to maintain the correct cross-browser behavior, the only other rule that have to be left in place is the outline. This rule resets the default border that appears (in some browsers) when the element is clicked. All the others rules can be easily modified if needed.
Drop-down Arrow for Internet Explorer 8 (IE8) and Internet Explorer 9 (IE9) using Icon Font
This is the harder part... Or maybe not.
There is no standard rule to hide the default arrows for these browsers (like the select::-ms-expand for IE10+). The solution is to hide the part of the drop-down that contains the default arrow and insert an arrow icon font (or a SVG, if you prefer) similar to the SVG that is used in the other browsers (see the select CSS rule for more details about the inline SVG used).
The very first step is to set a class that can recognize the browser: this is the reason why I have used the conditional IE IFs at the beginning of the code. These IFs are used to attach specific classes to the html tag to recognize the older IE browser.
After that, every select in the HTML have to be wrapped by a div (or whatever tag that can wraps an element). At this wrapper just add the class that contains the icon font.
<div class="selectTagWrapper prefix-icon-arrow-down-fill">
...
</div>
In easy words, this wrapper is used to simulate the select tag.
To act like a drop-down, the wrapper must have a border, because we hide the one that comes from the select.
Notice that we cannot use the select border because we have to hide the default arrow lengthening it 25% more than the wrapper. Consequently its right border should not be visible because we hide this 25% more by the overflow: hidden rule applied to the select itself.
The custom arrow icon-font is placed in the pseudo class :before where the rule content contains the reference for the arrow (in this case it is a right parenthesis).
We also place this arrow in an absolute position to center it as much as possible (if you use different icon fonts, remember to adjust them opportunely by changing top and left values and the font size).
.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
content: ")";
position: absolute;
top: 43%;
left: 93%;
font-size: 6px;
...
}
You can easily create and substitute the background arrow or the icon font arrow, with every one that you want simply changing it in the background-image rule or making a new icon font file by yourself.
In case you want to use the class and pseudo-class:
.simple-control is your css class
:disabled is pseudo class
select.simple-control:disabled {
/*For FireFox*/
-webkit-appearance: none;
/*For Chrome*/
-moz-appearance: none;
}
/*For IE10+*/
select:disabled.simple-control::-ms-expand {
display: none;
}
until safari 5.1 and maybe 6.0 it was possible to hide the slider-thumb via css
input[type=range].onoff::-webkit-slider-thumb,
input[type=range].onoff::-moz-slider-thumb,
input[type=range].onoff::slider-thumb {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
height:20px; width:20px;
background-color:transparent;
}
worked also in chrome, ff and opera.
now with safari 6.1 and 6.1.1, firefox 25
this css is not hiding the slider-thumb anymore.
what did i miss?
is there a better, more valid code i could use to hide just the thumb?
no jquery solutions please, i work on a native javascript plugin to add touchable audio-wheels, working in different environments. maybe later i will translate this to jQ too.
okay testet..
looks like, the comma separated list of selectors and setting them all ot once is not working anymore. so valid code can be..
input[type=range].onoff::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range].onoff::-moz-slider-thumb {
-moz-appearance: none;
}
input[type=range].onoff::slider-thumb {
appearance: none;
}
but still in FF i can't hide the thumb, how?