Puoi stile i pulsanti del modulo html con css?

Question

Non mi piace lo stile di pulsante predefinito. È davvero noioso Sto usando

<input type="submit"> 

tasti di tipo. Posso disegnare questi in qualche modo in css? Se no, l'altro modo di farlo credo sarebbe di usare invece un div, e renderlo un link. Come fai a lavorare con le forme?

Answer 1

È possibile raggiungere il vostro desiderata attraverso facilmente CSS: -

HTML

<input type="submit" name="submit" value="Submit Application" id="submit" /> 

CSS

#submit { 
    background-color: #ccc; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius:6px; 
    color: #fff; 
    font-family: 'Oswald'; 
    font-size: 20px; 
    text-decoration: none; 
    cursor: pointer; 
    border:none; 
} 



#submit:hover { 
    border: none; 
    background:red; 
    box-shadow: 0px 0px 1px #777; 
} 

DEMO

Answer 2

scrivere lo stile di seguito nella stessa sezione testa file HTML o scrivere in un file css

<style type="text/css"> 
.submit input 
    { 
    color: #000; 
    background: #ffa20f; 
    border: 2px outset #d7b9c9 
    } 
</style> 

<input type="submit" class="submit"/> 

.submit - in css. significa classe, così ho creato inviare classe con set di attributi
e applicato quella classe al tag inviare, utilizzando attributo class

Answer 3

Sì, è piuttosto semplice:

input[type="submit"]{ 
    background: #fff; 
    border: 1px solid #000; 
    text-shadow: 1px 1px 1px #000; 
} 

vi consiglio di dargli un ID o un classe in modo da poterlo indirizzare più facilmente.

Answer 4

Sì, è possibile targetizzare quelli specificatamente utilizzando input[type=submit] ad es.

.myFormClass input[type=submit] { 
    margin: 10px; 
    color: white; 
    background-color: blue; 
} 

Answer 5

È possibile creare direttamente il proprio stile in questo modo:

input[type=button] 
{ 
//Change the style as you like 
} 

Answer 6

Si potrebbe desiderare di aggiungere:

-webkit-appearance: none; 

se ne avete bisogno in cerca costante su Safari Mobile ...