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

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

Answer 3

我需要准备一个帖子重定向页面，因为那些依赖于提交表单，我需要在它们上放置一些东西，使它们工作，即使javascript由于某种原因失败了。如果javascript失败，那么提交表单的锚也不会工作。我不得不实际格式化按钮看起来像一个链接（所以重定向页面看起来像一个）。我的解决方案基于Vishal编写的内容，但我进行了一些小改动以使其看起来更好。结果如下。

＆＃13;

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;
}

＆＃13;

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

＆＃13;

编辑：在FireFox中删除填充的技巧取自here

Edit2：Made按钮从父元素继承字体样式，使其看起来像一个有效的链接（之前字体大小和字体系列与按钮不同）。

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

Answer 5

IMO我想我是一个很难对付的开发者。我会建议申请此申请的人选择只让它保持按钮？

您/他们是否考虑过以下内容？

从UI角度来看，使用除按钮之外的其他内容提交表单是最佳做法吗？
如果您使用CSS方法，我不相信Safari会允许您更改为按钮的外观。
如果您将<a>标记与某些javascript一起使用，那么您将拥有一个没有提交按钮的表单，这可能会在将来引起令人头疼的问题。如何轻松地从其他<a>标签中检测到您的提交链接？

Answer 6

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

提交按钮的CSS样式使它们看起来像锚标记不会跨浏览器。文本修饰：许多浏览器类型都忽略了下划线样式。

根据我的经验，最好的方法是在锚标记的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>

Answer 7

试试这个：

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

Answer 8

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

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

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

8 个答案: