Come fare un pulsante di invio di input con aspetto piatto?

Question

Qui ho un pulsante di invio:

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

E voglio aggiungere alcuni stili aggiuntivi per renderlo un aspetto piatto:

input { 
    border: 0; 
    background: none; 
    -webkit-appearance: none; 
} 

Questo è come appare in seguito:

Tuttavia, se si guarda attentamente, c'è ancora un po ' bordo nella parte superiore del pulsante di invio ...... C'è un modo per rimuovere la superficie incavata o sollevata e renderla un aspetto piatto semplice?

Answer 1

Sarà necessario impostare confine, box-shadow e lo sfondo a 0/nessuno di cancellare qualunque aspetto grigiastro come visto sul pulsante. Quindi per rimuovere gli angoli arrotondati impostare il raggio del bordo su 0px.

Le regole sono:

input[type="submit"] 
/* Or better yet try giving an ID or class if possible*/ 
{ 
border: 0; 
background: none; 
box-shadow: none; 
border-radius: 0px; 
} 

Answer 2

Vedo che gli angoli dei pulsanti sono arrotondati. Forse questo è causato da altri stili che lo influenzano. Tenta di rimuovere il border-radius in questo modo:

input { 
    border: 0; 
    border-radius: 0; 
    background: none; 
    -webkit-appearance: none; 
} 

Se questo non ha risolto il problema, allora avete bisogno di controllare ciò che lo stile che è l'aggiunta del bordo superiore. Si può provare a utilizzare i CSS !important con la dichiarazione di confine (non raccomandato btw):

input { 
    border: 0 !important; 
    border-radius: 0; 
    background: none; 
    -webkit-appearance: none; 
} 

Answer 3

input { 
    border: 0 none hlsa(0,0%,0%,0); 
    outline: 0 none hlsa(0,0%,0%,0); 
    box-shadow: none; 
    background: none; 
    -webkit-appearance: none; 
} 

Anche se outline non è un default del browser (per quanto ne so), in Bootstrap (se your'e usarlo o in un altro quadro simular) outline viene applicata anche se è non mostra in stile calcolato. Sto ancora cercando quella domanda a riguardo. A proposito, non ho aggiunto border-radius perché immagino che potresti volere angoli arrotondati e non dovrebbe essere un problema.

Answer 4

outline: none; sarebbe la mia prima ipotesi.

E anche si sarebbe probabilmente desidera rimuovere lo stato :focus e :hover stato come modo

input[type="submit"]:focus { 
background:none; 
outline: none; 
border:none; 
} 


input[type="submit"]:hover { 
background: none; 
border: none; 
outline: none; 
box-shadow: none; 
} 

questo che lo rende così quando viene premuto, esso non avrà un contorno sottolineato.

se non funziona provare a rimuovere altri stili come box-shadow:none;, border-radius:none;.