Wie stylen Text von Submit-Button

Question

Ich habe einen Link gestylt wie folgt:

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

ich einen Span-Tag innerhalb des Textes und bin mit einem font-awesome icon. Wie kann ich das für einen Absenden-Button verwenden? Ich versuchte dieses:

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

Aber ich habe keine Idee, wie man den Text des Absendenknopfes style.

Answer 1

Verwenden Sie eine button element.

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

... dann können Sie untergeordnete Elemente verwenden und sie unabhängig voneinander für das Styling ausrichten.

Answer 2

können Sie <button>

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

Button-Verhalten <input type="button"> oder <input type="submit"> anders verwenden dann. Sie können Elemente in <button> anhängen.

Answer 3

Sie können auch <button> Tag für das Senden verwenden. Sie müssen der Schaltfläche auch eine Art submit geben, um das Browserereignis zu erfassen.

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

EDIT: Warum Sie bei Ihrem Code type von einreichen

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

In diesem Fall alle, die wissen genau, welche <button> ist die tatsächlich Submit-Button in einem zweiten angeben sollen. Wenn jemand die Submit-Schaltfläche des Formulars mit dem CSS-Selektor abrufen möchte, kann dies auch einfach unter button[type="submit"] erfolgen. Ja submit ist der Standardtyp, aber es ist auch die bessere Praxis für die Lesbarkeit und einfacher für das Debuggen.