如何樣式提交按鈕

的文本我有一個鏈接樣式如下：如何樣式提交按鈕

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

但我不知道如何風格的提交按鈕的文本。

來源

2016-05-12 Adam

使用button element。

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

...那麼你可以有子元素和獨立的目標他們的造型。

來源

2016-05-12 09:44:58 Quentin

您可以使用<button>

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

按鈕的行爲是不同的，那麼<input type="button">或<input type="submit">。您可以在<button>附加元素。

來源

2016-05-12 09:45:02

謝謝。但是，你的意思是說行爲是不同的？根據http://www.w3.org/TR/html4/interact/forms.html#h-17.5，按鈕的默認行爲等同於'type = submit'。 – Adam

行爲我的意思是編碼行爲不是功能。如果你使用''那麼你會在'value'中輸入不支持任何子元素的文本，但是在按鈕中你可以添加子元素。 –

您還可以使用<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是默認類型，但它也是更好的可讀性和調試更容易的做法。

來源

2016-05-12 09:47:08

「您也可以使用'

如果要在表單內部放置多個'

- 不，它不是。 'submit'是默認的類型，並且有多個按鈕元素不會改變它。添加它只是膨脹了代碼。（我接受，如果你在表單中混合不同的按鈕類型，它可以使它更清晰，但這似乎並不是這種情況）。 – Quentin

如何樣式提交按鈕

回答

相關問題