Update: as it seems, the issue I'm describing in this question only affects OS X browsers.
I would like to change the font style of my input buttons in CSS more or less like this:
input[type="button"]
{
font: italic bold 3em fantasy;
}
Unfortunately, this doesn't work well in Chrome, Safari and Opera on OS X unless I also change the default background-color, which I don't want to do.
See here: http://jsfiddle.net/S7y5B/
So my question is simple: how can I change a button's font without also changing the background color, in a way that all browsers understand? I n the JsFiddle example above, I'd like to have Button 1 look like Button 2, but with the background color unchanged. How can this be done?
After fiddling with it, it seems OSX will change buttons despite normal styling done to them. Properties such as height(even when element is set to display:block), any font property and padding are not rendered. To see the actual styling, the element's border or background must be styled.
It seems that the color and width properties render normally.
Your buttons do look the same.
EDIT
OS.X Chrome:
Ok, I figured it out by myself. I'm styling the button using
-webkit-appearance: button;
The text inside the button is now rendering with the expected font without need to set the background color. The border still looks somewhat different, but that's another question.
JSsFiddle: http://jsfiddle.net/S7y5B/18/
Related
I want to deactivate the Chrome's default CSS like the input field background-color and all other stuff but i dont know how. Someone can explain me what i should do ? I should add some piece of code to my CSS file i guess.
To be more specific one of my problems is that i want to make an input text field with black background with background opacity of 0.5 and with white text color. So i made it and it work on IE or Mozilla but doesn't work on Chrome.
So all i want is to make my website's css to look same on Chrome as on Mozilla or IE.
Don't use it on the radio or checkbox inputs any time as they can end up looking like an unuseful skinny rectangle.
input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="file"]),
select,
textarea {
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
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 have this strange behaviour in IE9 where, when I change the border-color of a <input> on user-input (:hover or :focus), the layout will get crashed
I wanted to have a form where the labels are on the left with a min-height and if the label is wider, then the input field should go in the next row. This works good for me (not in this fiddle for all Firefox though, but on my development, but that's not the problem here)
I tested it in IE9 and then some input fields will jump to the right by the margin-left value n mouse hover.
I broke it down, that I can make this unhappen, if I lower the margin-bottom of the label (here from 5px to 4px), but the error shouldn't come up in the first-place
I can also have no error, if I do not change the border-color. Strange!
Here is an example:
http://jsfiddle.net/HerrSerker/9ktvX/ (Check in IE9)
Is this a known bug in IE9? Should I write to Microsoft?
edit
I updated the fiddle.
If I change the border-color via jQuery the bug does not appear.
If you change the font size in the input field to px, it fixes it... Seems to be be buggy due to the adaptive units?
http://jsfiddle.net/9ktvX/3/
input {
...
font-size: 13px;
...
}
Try to avoid "float" property. You can get the same layout with display:inline-block;
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;
I have the below code:
<button onmousemove="this.style.border='2px #555555 solid';"
onmouseout="this.style.border='';">Test</button>
On mousemove, it correctly changes the border as specified. On mouseout my intention is to change the border back to the original. This works in Gecko based browsers but not in IE. IE removes all the borders and the button becomes 2D.
How do I get back the original 3D look of the button?
Note: For debugging, I tried alert(this.style.border) the get the value of the original border. It shows it blank. So the original border value seems to be blank. But setting to blank does not bring the original look back. :(
Try setting and clearing a class for the element and assigning the border value to the class. Just like below:
.buttonHover
{
border: 2px #555555 solid
}
<button onmousemove="this.className='buttonHover';" onmouseout="this.className='';">Test</button>
Note that this simple JS code will break your existing classes assigned to the element if there are any. If you are to use additional classes, please add a comment declaring the situation and I'll change the code accordingly.
As far as I know, there is no way to restore the original OS look once the element's border is set, although it strikes me as odd that even emptying border doesn't do the job. Ah well. The OS style is not just a classic border, but includes a black outline (depending on OS visual settings, even more than that).
Seeing as IE < 8 doesn't understand outline, I think the best workaround would be putting an element around the button, and highlighting that on hover.
Would recommend using CSS for the same rather than javascript. You can do the following.
Define only the hover propery of the button.
HTML :
<button value="Hello">Hello</button>
CSS :
button:hover
{
border:1px solid #333;
}
I think that what you are looking for can be found in the bowers user agent CSS. Here is a table that will give you a good idea of whats going on with different browsers http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm .