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 开发者_C百科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
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.
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;
I tend to use a <span>
to simulate a hyperlink, and actually call a JavaScript function, which you could of course then underline.
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".
精彩评论