I'm trying to style the font in an input button as bold.
Here's my code:
<input type="submit" id="nm-match" class="nm-button" value="Match" />
Here's my CSS:
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: bold;
}
All the styles are being applied apart from the bold.
Here's a JSFiddle showing the problem: http://jsfiddle.net/CJg43/1/
UPDATE: Why the close votes? Here's a screenshot of how it looks for me, in Chrome on MacOS:
UPDATE 2: ... and for comparison, here's how it looks with the solution (background-color: white) applied - http://jsfiddle.net/CJg43/23/
Are you using chrome for a MacOS? If so, try adding a background-color to the button to see if it fixes it. The default Aqua styles might be interfering. You can also try -webkit-appearance: none; or -webkit-appearance: button;.
When you use numeric values with the font-weight property and you want to use bold then use the value greater than or equal to 700
.nm-button {
text-transform: uppercase;
padding: 5px;
color: blue;
font-weight: 700;
}
Js Fiddle Demo
Related
Why does input get Ubuntu font instead of monospace font in this sample?
It is a tiny sample from some HTML code where the inputs are nested much deeper – but has the same effect.
Is there a general rule for what elements I have to specifically set font-family or inherit it? Input, label, button, …
Is it a bad idea to use something like this?
body * { font-family: xxx; }
What I want to do is set a "global font" and optionally set other font-families on elements where that is desired. Thought that was achieved by setting it on html, body { }. Obviously not.
Sample code:
html, body {
font-family: monospace;
}
.inp {
font-family: monospace;
/* or alternatively
font-family: inherit;
*/
}
<p>Some text</p>
<input type="text" value="123456789.0" /><br />
<input type="text" value="123456789.0" class="inp" />
Result (picture):
The result looks like this in Fire Fox on Ubuntu:
I'll add some pictures from Inspector in developer tools.
I was only looking at the rules section of the tools at first and as it say monospace I did not find the fault until I looked at computed ;)
From «Computed» on left and «Rules» on right:
<body> has focus:
<p> has focus:
First <input> has focus:
Second <input> has focus:
Most HTML elements aren't assigned a font-family by the browser's user-agent style sheet, so they will inherit whatever you set on the body element.
Some elements, however, do receive styles from the user-agent, so they override the family you have on body. Inputs, buttons, and other form controls are often a problem.
In a CSS reset, it is very common to give these elements font-family: inherit example from normalize.css:
input {
font-family: inherit;
}
Inherit will set the input to use whatever font-family it would normally inherit, so it will then use your styles set on body.
Looks like it is inheriting the agent font from the input element.
The browser applies its own styling. In your case, the browser's styling on input takes precedence over inherited properties on html and body. On chrome you can see the user-agent style:
input {
-webkit-writing-mode: horizontal-tb !important;
text-rendering: auto;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
margin: 0em;
font: 400 13.3333px Arial;
padding: 1px 0px;
border-width: 2px;
border-style: inset;
border-color: initial;
border-image: initial;
}
You'll be better off using .inp to style your element. Or for consistency you can style the input type:
input[type="text"] {
font-family: monospace;
}
In below code, the tab font (text) color changes, but on focus it doesn't. When I unhover the selected tab, it works fine. Can any one guide me on how I can change the text color on courser focus as well?
<style>
.redtab .z-tab-seld .z-tab-text{
color:#e4710b;
font-weight: bold;
font-size: 15px;
}
</style>
<style>
.redtab .z-tab-seld .z-tab-text,.redtab .z-tab-seld .z-tab-text:hover{
color:#e4710b;
font-weight: bold;
font-size: 15px;
}
</style>
So I have a button inside a div. I want to make the font-weight: bold so I put it in the css. I fire up the website and the text of the button isn't bold. I then check it with Firebug and the font-weight: bold isn't even there? When I manually type it there in firebug my text becomes bold, just as I want it.
I'm working with bootstrap, here is the css of the button:
.btn-primary {
background: url("../img/bg-nav.png") repeat-x scroll left bottom #198901;
color: #ffffff;
font: 17px "bowlby_oneregular",sans-serif !important;
font-weight: bold;
text-transform: uppercase;
}
I find it strange that it doesn't show up with Firebug, and yet when I put it there with Firebug it works
There are two solutions:
Remove !important:
font:17px "bowlby_oneregular",sans-serif;
font-weight:bold;
Split the shorthand property up:
font-size:17px;
font-family:"bowlby_oneregular",sans-serif;
font-weight:bold;
The exact solution depends on how exactly you want to apply the fonts. But I’d simply rewrite your code so that !important will never become necessary.
I set the font-size style of a <textarea> to 120%. But the text turns out to be much bigger under Firefox compared to that under Chrome.
After checking the style using developer's tool I found the following preset style under Chrome:
input, textarea, keygen, select, button {
margin: 0em;
font: normal normal normal 13.3333330154419px/normal Arial;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
It seems that under Chrome the 120% is computed against 13.333px, while Firefox will computed it against the real default font-size 16px and finally make the text appears much bigger.
I do use css reset to override the default style but Chrome insists computing 120% against the 13.333px preset font size.
Please anyone tell me how can I make Firefox and Chrome render percent font size in textarea the same?
I am new to GWT/uiBinder (latest version of GWT and testing under latest Eclipse) and really puzzled. My CSS for buttons is ...
/* --button-- */
.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00; /* this gets ignored */
}
The background does nothing, the rest works.
I have tested that this CSS entry does something by changing the color and seeing that it works. I have also tried "background-color" (I have seen both in various docs). The background never changes.
I also tested a gwt-TextBox as follows and it works just fine.
/* --text box-- */
.gwt-TextBox {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: Beige;
}
Note: I know that sometimes while testing you have to refresh the web page to see your changes.
Note: I can set the button background by using a CSS entry called "myButton" and using styleName='myButton' it in the uiBinder entry.
Note: The button is in a Layer in a LayoutPanel in a north:DockLayoutPanel in an east:DockLayoutPanel.
Help!
https://stackoverflow.com/a/7833358/635411
You can use a more specific selector like the other answer suggests:
/* --button-- */
button.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00;
}
Personally, I try to avoid overwriting the default styles because of the precedence issues.
I think this should solve your problem
.gwt-Button {
font-size: 16px;
font-weight: normal;
color: #0F0;
background: #F00 !important;
}
You need to include this line before you make any changes to the background of gwt-Button
background-image:initial !important;
The problem you're having is that you're trying to set a background color, when gwt-Button uses a background image, so the image goes over your background color, making it seem like your css is being ignored.
there is a simpler way
you need to remove the gwt-Button style and then add whatever color you like
`
Button button=new Button();
button.removeStyleName("gwt-Button");
button.getElement().getStyle().setbackgroundColor("#F00");
//incase you need to remove the default border style aswell
button.getElement().getStyle().setBorderStyle(BorderStyle.NONE);
`