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

Question

这在IE中不起作用：

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



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

它显示一个正方形按钮。

- Will Curran

Answer 1

从这个链接复制，您可以使按钮看起来像链接-

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

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

- Vishal

---

在CSS中，我认为submitLink:focus应该改为.submitLink:focus以去除轮廓线。 - Mayur Patel

Answer 2

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

- labue

Answer 3

我需要准备一个“post redirect”页面，因为它们依赖于表单提交，所以我需要在其中放置一些内容，即使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中去除填充的技巧来自这里

编辑2：使按钮继承父元素的字体样式，使其看起来像一个有效的链接（以前按钮的字体大小和字体家族不同）。

- jahu

Answer 4

试试这个：

<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+"/>

- Chandu

---

这可能是一篇旧帖子，但仍然有许多原因会促使某人需要它。例如，也许他们想要提交一个看起来并不像表单的表单。可能是他们想这样做只是为了避免使用 $_GET 参数。 - Tienus McVinger

Answer 5

我认为mofolo上面提交的答案是更正确的解决方案。

将提交按钮的CSS样式设置成类似锚点标记并不跨浏览器。text-decoration:underline样式会被许多浏览器忽略。

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

例如：

用户详细信息表单屏幕上的"删除"链接，在提交id为"userdetails"的表单之前进行确认。

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

- SyntaxGoonoo

Answer 6

我认为我可能是一个难以处理的开发者。我建议请求此应用程序的人可以选择让它保持为按钮的选项？

你/他们考虑过以下事项吗？

1. 从UI角度来看，使用除按钮之外的其他东西提交表单是否是最佳实践？
2. 如果您选择CSS方法，我不认为Safari会允许您更改按钮的外观。
3. 如果您使用<a>标签和一些JavaScript，则具有没有提交按钮的表单，这可能会在将来引起麻烦。如何轻松检测您的提交链接与其他<a>标签？

- Doug Chamberlain

Answer 7

试试这个：

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

- Paul Spencer

Answer 8

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

你应该使用一个链接到 JavaScript 片段的 <a href=""></a> 标签，然后由它来提交表单。

- chustar

---

下面的示例向您展示了如何实现，或者以我不知道的方式这样做是否会产生后果？谢谢。 - Will Curran