CODEWITHSUNDEEP
htmlcssform-submithyperlink
Richard H
Richard H

Reputation: 39055

Underlining the text in an submit button (html, css)

I'm (probably unwisely) attempting to style an input submit button to make it look like a regular hyperlink. Using css everything is fine, except for the underlining, which is not being rendered. Css:

input.addemail { 
  border: 0px; 
  background-color: #1e2f45; 
  text-decoration: underline; 
  cursor: hand;
  cursor: pointer; 
  color: #ffd17d; 
}

Is there a way to underline the text (value) of a submit button that'll work x-browser? Or is there another approach - e.g use an image? Obviously I'd like a good guarantee that whatever approach is used it'll work x-browser, inc. ie6 :). Or is this just futile??

Another approach would be to hide the button and use a hyperlink which when clicked would, in javascript, submit the form. But I understand that there may be issues with the user expecting to be able to hit return, which may not work if the button is hidden.

Any suggestions much appreciated.

Thanks

Upvotes: 4

Views: 37750

Answers (4)

Assambar
Assambar

Reputation: 403

I had the same trouble, and after googling, I found an answer that works for me

input {
    text-decoration:underline;
    display:inline-block;
}

The solution with more examples belongs to Mike Ballan, here.

Upvotes: 13

Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14921

I tend to use a <span> to simulate a hyperlink, and actually call a JavaScript function, which you could of course then underline.

Upvotes: 2

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114347

If you move the submit button off-screen you can then use the A link for the nicely-styled button as well as have the "press return" functionality.

You can use various CSS tricks, including "margin-left:-9999".

Upvotes: 0

Sarfraz
Sarfraz

Reputation: 382686

You can't use text-decoration for the button, as an alternative, you can mimic the similar behaviour with border property like this:

border-bottom:1px solid #1e2f45;

Upvotes: 8

Related Questions