如何设置提交按钮的文本样式答案

【问题标题】：How to style text of submit button如何设置提交按钮的文本样式
【发布时间】：2016-05-12 09:42:54
【问题描述】：

我有一个样式如下的链接：

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

我在文本中使用了一个跨度标签和一个font-awesome icon。如何将其用于提交按钮？我试过这个：

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

但我不知道如何设置提交按钮的文本样式。

【问题讨论】：

大概</i>关闭标签应该在问题中的Add new文本之后和下面的答案中？
@clayRay 猜这是一个设计问题 :)
哦，.fa-plus 类中是否有添加 + 符号的伪元素？在这种情况下工作正常。我只是不知道<i>.. 会做什么。

标签： html css

【解决方案1】：

使用button element。

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

...然后您可以拥有子元素并独立定位它们以进行样式设置。

【讨论】：

【解决方案2】：

你可以使用<button>

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

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

【讨论】：

谢谢。但是，您的行为不同是什么意思？根据w3.org/TR/html4/interact/forms.html#h-17.5，按钮的默认行为相当于'type=submit'。
对于行为，我指的是编码行为而不是功能。如果您使用<input type="submit">，那么您将在value 中输入文本，该文本不支持任何子元素，但您可以在按钮中添加子元素。

【解决方案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 是默认类型，但它也是更好的可读性和更易于调试的做法。

【讨论】：

“你也可以使用<button>标签提交”——你第三个人这么说。 “您还需要为按钮提供一种提交类型”——错误。提交是类型属性的默认值。
如果您要在一个表单中放置多个<button>，最好指定type of submit。
——不，不是。 submit 是默认类型，拥有多个按钮元素不会改变这一点。添加它只会使代码膨胀。（如果您在表单中混合不同的按钮类型，我会接受它可以使它更清晰，但这里似乎并非如此）。