开发者

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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜