如何使提交按钮显示为链接？

Question

这不是工作在IE：

.text-button { background: transparent; 
       text-decoration: none; 
       cursor: pointer; } 



<input type="submit" class="text-button" value="vote+"/> 

它显示一个方形按钮。

Answer 1

从这个link复制，你可以让你的按钮看起来像一个链接 -

.submitLink { 
 
    background-color: transparent; 
 
    text-decoration: underline; 
 
    border: none; 
 
    color: blue; 
 
    cursor: pointer; 
 
} 
 
submitLink:focus { 
 
    outline: none; 
 
}

<input type="submit" class="submitLink" value="Submit">

Answer 2

试试这个：

.text-button { 
border: none; 
background: transparent; 
cursor: pointer } 

Answer 3

试试这个：

<style type="text/css"> 
    .text-button 
    { 
     background-color: Transparent;     
     text-decoration: underline;     
     color: blue; 
     cursor: pointer; 
     border:0 
    }  
</style> 
<input type="submit" class="text-button" value="vote+"/> 

Answer 4

<form name='test'> 
    <a href="javascript:document.forms['test'].submit()">As a link</a> 
</form> 

Answer 5

你不能这样做的按钮，因为像输入元素的东西是客户端浏览器和机器的元素，而不是你的CSS代码。

您应该使用链接到JavaScript代码片段的<a href=""></a>标签，然后为您提交表单。

Answer 6

IMO我想我是一个难以应对的开发者。我会建议请求这个应用程序的人选择让它保持一个按钮吗？

你/他们认为以下？

1. 从UI的角度来看，使用按钮以外的其他方法提交表单最好吗？
2. 如果你确实采用CSS方法，我不相信Safari会允许你改变为按钮的外观。
3. 如果您使用带有JavaScript的<a>标签，那么您的表单没有提交按钮，这可能会在未来引起头痛。您如何轻松地从您的其他<a>标签中检测到您的提交链接？

Answer 7

我相信mofolo上述提交的答案是提交按钮的更正确的解决方案

CSS样式，以使它们看起来像锚标记，则没有做跨浏览器。文本修饰：下划线样式被许多浏览器类型忽略。

我的经验中最好的方法是在锚标记的onclick事件上使用javascript。

例如：

“删除”的用户的详细信息链接形成屏幕，用确认为“的UserDetails”的ID提交表单前

<a href="#" onclick="if(confirm('Are you sure you want to delete this user?')){document.forms['userdetails'].submit();}return false;">Delete</a> 

Answer 8

我需要准备后重定向页面，因为那些依靠提交表单，我需要放置一些东西，使他们工作，即使JavaScript由于某种原因失败。如果JavaScript失败，那么提交表单的锚点也不起作用。我不得不将格式化按钮看起来像一个链接（所以重定向页面看起来像一个）。我基于Vishal写的解决方案，但我做了一些小修改，使其看起来更好。结果如下。

button 
 
{ 
 
    padding:0; 
 
    background-color:transparent; 
 
    text-decoration:underline; 
 
    border:none; 
 
    border:0; 
 
    color:blue; 
 
    cursor:pointer; 
 
    font-family:inherit; 
 
    font-size:inherit; 
 
} 
 

 
button::-moz-focus-inner 
 
{ 
 
    border:0; 
 
    padding:0; 
 
}

To complete the redirect <button>click here</button>.

编辑：在Firefox去除填充的诀窍是从here

采取EDIT2：从父元素制成按钮继承字体样式，使它看起来像一个有效的链接（以前字体大小和字体系列对于按钮来说是不同的）。