如何为提交按钮设置文本样式

Question

我有一个这样的样式链接：

<style>
  .addNew{
    background-color: #FFF;
    display: block;
    margin-top: 10px;
    padding: 20px;
    color: #08c;
    border:3px dashed #08c;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    font-size: 1em;
  }
</style>
    <a class='addNew'>
            <i class="fa fa-plus" ></i> Add new 
            <span style='text-decoration:underline'>Object</span>
    </a>

我在文本中使用了一个span标签和一个font-awesome图标。我该如何将它用于提交按钮？我尝试过以下代码：

<input type='submit' class='addNew' value="Add new Object">

但是我不知道如何为提交按钮的文本添加样式。

- Adam

---

请问在问题和下面的答案中，“</i>”结束标签应该放在“Add new”文本之后，对吗？ - clayRay

@clayRay 猜测这是一个设计问题 :) - Adam

哦，.fa-plus 类中是否有一个伪元素来添加 + 符号？如果是这样的话那就没问题了。我只是搞不清楚 <i>.. 会做什么。 - clayRay

Answer 1

使用按钮元素。

<button class='addNew'>
        <i class="fa fa-plus" ></i> Add new 
        <span style='text-decoration:underline'>Object</span>
</button>

...那么您可以拥有子元素，并针对它们进行独立的样式设置。

- Quentin

Answer 2

你可以使用<button>标签。

<button><i class="fa fa-plus"> Add new <span style="text-decoration:underline;">Object</span></button>

按钮的行为与<input type="button">或<input type="submit">不同。您可以在按钮中附加元素。

- Gaurav Aggarwal

---

谢谢。但是你说的行为不同是什么意思？根据http://www.w3.org/TR/html4/interact/forms.html#h-17.5，按钮的默认行为等同于“type = submit”。 - Adam

注意，这里的“行为”是指编码行为而不是功能。如果你使用 <input type="submit">，那么你会在 value 中输入文本，该属性不支持任何子元素，但在按钮中，你可以添加子元素。 - Gaurav Aggarwal

Answer 3

你也可以使用 <button> 标签来提交表单。你需要给按钮一个类型为 submit 来捕获浏览器事件。

<button type="submit">
    <a>link</a>
    <span>span</span>
</button>

编辑：为什么你应该指定提交的type

<form>
    <input />
    <button type="button">not a submit button</button>
    <button type="submit">submit button</button>
</form>

在这种情况下，任何查看您的代码的人都可以在一秒钟内准确知道哪个<button>实际上是提交按钮。此外，如果有人要使用CSS选择器获取表单的提交按钮，则可以通过button[type="submit"]轻松实现。是的，submit是默认类型，但对于可读性和更易于调试来说，它也是更好的做法。

- Kai Hao

---

“你也可以使用<button>标签进行提交。” — 你是第三个说这个的人了。“你还需要给按钮设置一个提交的类型。” — 错误。提交是类型属性的默认值。 - Quentin

如果您要在表单中放置多个<button>，最佳实践是指定submit的type类型。 - Kai Hao

不，不是这样的。submit 是默认类型，有多个按钮元素也不会改变它。加上它只会让代码变得臃肿。（如果在表单中混合使用了不同类型的按钮，则可能会使其更清晰，但这似乎并非此处情况）。 - Quentin