CSS 输入框、提交按钮和链接

Question

我有这段HTML：

      <form id="REVIEW" method="post" action="/SortReviews">
        <fieldset class="sort">
          <input type="submit" value="$ratingLine"/>            
        </fieldset>
      </form>

我想给提交按钮添加一些CSS，使其看起来像一个链接。

{
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

我该怎么做？

- SuperString

---

只是注意到将按钮设置成链接的外观会违反一些可用性规则。执行操作并进行回发的按钮应该看起来像按钮。 - Steve Costello

@Steve Costello - "postback" 和可用性有什么关系？没有任何最终用户会看着一个按钮并想到“哦，这是一个 postback！”我认为这样做既尊重 Fitt 定律的反面，同时也尊重 HTTP GET 作为一种安全方法。 - Richard JP Le Guen

Answer 1

<style type="text/css">
form input[type="submit"]{

    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}
</style>

这不是你在寻找的吗？

另一个选项，如已经提到的，是使用 JavaScript 在单击锚元素时提交表单：

<a href="#" onclick="document.review.submit()">submit</a>       

如果你的表单有一个属性：name="review"

- Herman Schaaf

---

我相信你也需要设置：margin:0; padding:0; - John Magnolia

Answer 2

您应该为按钮分配一个类。

<input type="submit" value="$ratingLine" class="link-lookalike"/>

在您的CSS文件中（或者在<style type="text/css"></style>标签内部）使用以下代码：

.link-lookalike {
    background: none;
    border: none;
    color: blue;
    text-decoration: underline;
    cursor: pointer;
}

这样你就可以将类分配给页面上的不同按钮（如果需要），它们都会获得相同的外观。

- Gabriele Petrioli

Answer 3

使用 button 元素：

<button type="submit">$ratingLine</button>

- Tim Hettler

---

为什么这个被踩了？输入元素有样式限制，而按钮元素没有。 - Tim Hettler

虽然这个回答很有用，但并没有完全回答问题。可能这就是为什么会被踩的原因，尽管几年过去了... - jahu

Answer 4

你需要添加一个类，例如"submitClass"。

<input type="submit" value="$ratingLine" class="submitClass"/>

   .submitClass {
        background: none;    
        border: none;    
        color: blue;    
        text-decoration: underline;    
        cursor: pointer;
   }

- Eric Frick

---

你不需要在某个元素上添加类来进行样式设置。在这个例子中，"#review input" 就可以很好地工作。 - Tim Hettler

@Tim，但这会使他决定放入表单中的其他输入元素都采用同样的样式...在示例代码中，它可以工作，但为什么不让它更具可扩展性呢？ - Gabriele Petrioli

Answer 5

以下是我用HTML和CSS的方法：

<p><form class='input-to-link-form'><input type="submit" value="Place your order" class="input-to-link"></form> and make payment.</p>

.input-to-link {
  margin: 0;
  padding: 0;
  color: #0088cc;
  text-decoration: none;
  font-weight: 300;
  cursor: pointer;
  background: none;
  border: none;
}

.input-to-link-form {
  margin: 0 4px 0 0;
  padding: 0;
  float: left;
}

- Ryan Walton