Changing HTML button font with CSS

Question

I've been trying and failing to change button font with CSS. I can change their background color and I can change a textarea input's font, but for some reason I don't seem to be able to change a button's font. From my limited understanding, the following code should work:

<html> 
<head> 
<style> 
    body {
        font-family: monospace;
    }
    input[type=button] {
        font-family: monospace;
    }
    </style> 
</head>
<body> 
    This is a button: 
    <input type = "button" value = "Please click"> 
</body> 
</html>

But only changes the font of the text, not the button. What am I missing?

[UPDATE] Per the responses here I changed input [type = button] to input[type=button].

Okay, so I removed the spaces. If I add a change such as color before the font change, it works, but if the only change is font-family it doesn't do anything. Could anyone enlighten me on way that is? — Itai Yasur, Jun 09 '18 at 11:37
In your case only the space between `input` and `[` was important. And it works fine (see https://jsfiddle.net/vrpoL7bh/) — Gabriele Petrioli, Jun 09 '18 at 11:41
Hmm, the fiddle example shows up correctly on my phone but in every browser on my computer the button text remains unchanged. — Itai Yasur, Jun 09 '18 at 11:46
Yeah, I'm getting the same issue in the fiddle. If I change other elements, such as the background and text color, the font shows up correctly. If I only change the font, the browsers not displaying it correctly. Issue on my end? — Itai Yasur, Jun 09 '18 at 11:50

score 6 · Accepted Answer · answered Jun 09 '18 at 11:11

6

It is so simple, you already have it. I think you made a mistake while writing CSS of it, you have a space in input[type=button], though you were pretty close.

<style> 
body {
    font-family: monospace;
}
input[type=button] {
    font-family: monospace;

}
</style>

answered Jun 09 '18 at 11:11

Sitecore Sam

377
2
8
14

@sam this was work for me – Sohail Ali Jul 23 '18 at 13:03

score 2 · Answer 2 · answered Jun 09 '18 at 11:10

2

You have a spce between input and [type=button]. Remove it and it would work. Try this code.

 input[type=button] {
        font-family: monospace;
    }

answered Jun 09 '18 at 11:10

Aryan Twanju

2,464
1
9
12

score 1 · Answer 3 · answered Jun 09 '18 at 11:10

The problem is the space after input. this should work:

<html> 
<head> 
<style> 
    body {
        font-family: monospace;
    }
    input[type = button] {
        font-family: monospace;
    }
    </style> 
</head>
<body> 
    This is a button: 
    <input type = "button" class = "button" value = "Please click"> 
</body> 
</html>

Changing HTML button font with CSS

3 Answers3

Linked