There were similar questions in the past but I ask it anyway because many things changed. See the following:
https://jsfiddle.net/32sn0L37/1/
<select>
<option>hello1</option>
<option>hello2</option>
<option>hello3</option>
</select>
select { font-size: 300%; }
The font size of the option texts in the dropdown list changes in all major browsers (IE, Chrome, Opera) except in Firefox.
Any idea how to increase it in FF too from CSS or JS? Thanks.
Related
I'm working on a contact form where the select inputs are designed to have white text on a black background. The desired styles are being applied correctly in every instance except when accessed via Safari or Firefox on either an iPhone or iPad.
The relevant CSS Script is as follows:
select{
-webkit-appearance: none;
color: white !important;
}
Is there a particular reason that these browsers may not be processing this style? And how would I circumnavigate it?
*edited as both Firefox and Safari express this same issue
This type of styling is not currently supported by WebKit browsers on Mac OS X. You may find some more ideas here: Pure CSS solution to styling specific options in Webkit based browsers?.
Have you tried styling the option?
select option {
color: white;
}
font-variant: small-caps;
font-size: 12px;
Firefox:
Capital letters: 12px
Lowercase letters: 10px
Chrome:
Capital letters: 12px
Lowercase letters: 8px
How to harmonize that without using JavaScript?
Webkit browsers display small-caps smaller than other browsers so.. You can use CSS media queries to easily sniff out webkit browsers like Chrome and Safari. Try something like this:
#media screen and (-webkit-min-device-pixel-ratio:0) {
.some-element-using-small-caps {
font-size: .85em
}
}
You can target the browsers individually by using css hacks like this:
#-moz-document url-prefix() {
//firefox specific css here
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
//chrome specific css here - this will also hit other webkit browsers like safari tho
}
A nicer way however in my opinion involves a tiny bit of javascript that detects the browser and sets a class on the html element and then you can use that class as a base for targeting the individual browsers.
in the end it would look something like this:
<html class="firefox">
...
</html>
.firefox .rulename {
//firefox specific css here
}
and of course the same for chrome and whatever else browser
I am having a similar issue with a much weirder issue between Safari on iPad vs Safari on Desktops, showing a different scale for small-caps at 16px. For some reason small-caps is a bigger size on iPads, kinda matching that of Firefox.
Adjusting the font size or letter-spacing a half pixel less or so, can mitigate the issue without further additional hack. By essentially finding a tiny middle adjustment which trigger on one browser but not on another, to try and get as close as possible.
What I have observed for Firefox and IE, is that fonts tend to scale with many more intermediate sizes than that of Webkit. For example, in IE and Firefox, 15.6px is a tiny bit bigger or use more tracking to adjust, than that of 15.5px, and so is 15.7px, 15.8px etc. With a difference for nearly every 0.1 pixel. Whereas in Safari the difference is only perceived for every 0.4px or so.
For my small-caps case here which created an overflow issue, I used 15.5px, which is barely different from 16px on Safari (Desktop), yet bring down the small-caps size for IE and Firefox as close as possible to Safari's.
How can we change the CSS rules of dingbats? The following does not work in iOS Safari.
<span class="dingbat">✖</span>
<style>
.dingbat {
color: blue;
font-size: 100px;
}
</style>
Below is a JSFiddle that demonstrates the issue. If you open the JSFiddle in a desktop browser, the dingbat X color will be blue and the size will be 100px. But if you open it in mobile Safari, the color will be black and the size will be small.
https://jsfiddle.net/ujs80tv1/2/
This question was marked as a possible duplicate of "Color of Unicode Emoji". I don't think this question is a duplicate, because I definitely can change the color of Unicode dingbats in most browsers (see JSFiddle for example). The only browser I am not able to change the color in is mobile Safari. You cannot change the color of emojis in any browser as far as I know.
The recommended answer in the "Color of Unicode Emoji" question says to use a new font or library. That may be a workaround, but it doesn't answer the question. If someone can prove that unicode dingbats cannot be styled in mobile Safari I would accept that as the correct answer.
A response in a similar post answers this. It worked for me!
HTML unicode arrow works on Safari desktop, but not Safari for iOS
font-family: 'Zapf Dingbats';
You cannot change the color of the default ✖ style.
You have to first set a font to it.
In the css just add font-family: "Times New Roman".
I can't get a input button to change its font size unless I change the background color.
this html:
<input type="button" id="startStop" value="start" />
and this css:
input#startStop{
font-size: 3em;
}
result in this:
which is exactly the same as with no styling at all.
Nothing I do to the css changes it: making it 60em; changing how I select it; they all result in the same, default-looking button.
I inspected it in Chrome, and the style is actually hitting the element, and not getting overridden:
But somehow the computed style isn't working:
(that's with a base font-size of 1em for the whole document. and, no, changing the base font-size has no effect)
The only thing that changes the font size it is if I give it a background-color:
input#startStop{
font-size: 3em;
background-color: white;
}
results in this:
Can anybody tell me what is going on?
EDIT: #Hashem Qolami, thanks for posting it in an external editor, which I should have done. When I look at your JS bin, it looks like this:
EDIT 2: it's browser specific.
The error is only occurring on Chrome, Safari and Opera, and only on Mac.
If renders correctly on Firefox for Mac and on all browsers (IE10, Chrome, Firefox, Safari, and Opera) on windows.
Indeed this only happens on WebKit-MacOS based browsers. Seems to be a WebKit restriction so that the Aqua appearance stays always so.
As long as the Aqua appearance is enabled for push buttons, certain CSS properties will be ignored. Because Aqua buttons do not scale, the height property will not be honored. Similarly font and color customizations will also not be honored. The overriding principle for push buttons is that you will never see a button that is some “half-Aqua” mix. Either the button will look perfectly native, or it will not be Aqua at all.
Source: https://www.webkit.org/blog/28/buttons
Which explains why setting a background makes font-size works; it breaks the Aqua appearance.
#pzin's response got me started on the right track. He's right in that anything that breaks aqua will get it done. The recommended way to handle it without having to specify a background color is this bad boy:
-webkit-appearance: button;
Setting a border property should also work. But I think -webkit-appearance: none; would be the best approach, as it "turns off" the Aqua appearance on MacOS browsers, so any other form control that Aqua inhibits CSS for would subsequently be style-able with your choice of CSS. Was meant to add this as a comment, but don't have enough reputation ;_;.
I see that you successfully had solved the problem, but I wonder, if the only problem is to make the button bigger, why sticking to font-size method while you can also change the button size by width + height or padding.
I'm working on a site and I have some problems that I hope you guys can help me with :)
If I put bold on my text in the menu it looks too bold in Firefox :S, but it looks fine in Chrome.
In Firefox the double border on the #content container is outside of the shadow effect :S, but looks good in Chrome.
Screen shot on Mac Firefox 5.0.1 and Chrome 13.0.782.112:
This is my project.
I hope some one can help me out with this.
If you have something I better I can do, I will be glad to hear that too :)
Your first issue regarding bold font looking different between the browsers is just because of the way browsers render text differently. There is nothing you can do about it, unless you go the horrible route of using images instead.
Your second issue is not about the border but rather the outline. It is caused because of the way Firefox interprets the outline when box-shadow is applied. It applies it outside of the shadow instead.
You can put the code below in your css to target Firefox and bring the outline back in:
#-moz-document url-prefix() {
#content{
outline-offset: -11px;
}
}
Live example: http://jsfiddle.net/tw16/n8bet/
#1: There differences in font rendering in every browser. You can try numeric values instead of simply bold to narrow the results ( http://clagnut.com/blog/2228/ ). Also read the answer on this SO entry: Same font except its weight seems different on different browsers
#2: remove this line from #content css:
outline: 1px solid #B9BDBE;