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

Solution 1:

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

Solution 2:

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.

Solution 3:

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>.