CODEWITHSUNDEEP
htmlcsscross-browser
Travis J
Travis J

Reputation: 82267

css text-decoration underline not working when applied to the text of an input button

Pretty self explanatory. I have an input button. It has text. It has a css class. The css class has the attribute "text-decoration:underline;". The underline does not show up in firefox. I tried adding "!important" to the attribute but to no avail. Apparently this is a known issue. Anyone know a workaround?

Upvotes: 0

Views: 7395

Answers (3)

Petja Zaichikov
Petja Zaichikov

Reputation: 283

Better way is to use display:inline-block it does not alter position of element.

Upvotes: 4

benesch
benesch

Reputation: 5269

Apply position: absolute, display: block, or float: left to the button. (display: block recommended.) Don't ask why.

You may also notice that Firefox will render the underline in quirks mode.

Upvotes: 3

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201548

I don’t see any problem with underlining the text in <input type=button> on Firefox (technically, I mean; I see many usability problems with the idea). You may have something else on your page that prevents the underlining.

On the other hand, if you wish to underline just parts of the text, you can use <button>, which lets you use markup in the text, even <u>.

Upvotes: 0

Related Questions