Wie man einen Eingabefehlerknopf mit flacher Optik macht?

Question

Hier habe ich einen Submit-Button:

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

Und ich möchte einige zusätzliche Arten hinzufügen es einen flachen Blick zu machen:

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

Dies ist, wie es aussieht, danach:

Allerdings, wenn Sie genau hinschauen, gibt es noch einige Grenze auf der Oberseite des Absendeknopfes ...... Gibt es eine Weise, die eingesunkene oder angehobene Oberfläche zu entfernen und es einen Ebene flachen Blick zu machen?

Answer 1

Sie müssen Grenze, box-shadow und Hintergrund 0/none setzen jedes gräulich Aussehen zu entfernen, wie auf dem Knopf zu sehen. Dann, um die abgerundeten Ecken zu entfernen, setzen Sie den Rand-Radius auf 0px.

Regeln sind:

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

Ich sehe, dass die Schaltfläche Ecken abgerundet sind. Vielleicht wird dies durch andere Stile verursacht, die das beeinflussen. Versuchen Sie, die border-radius wie folgt zu entfernen:

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

Wenn das nicht das Problem lösen, dann müssen Sie prüfen, welche Art, welche die obere Grenze hinzufügt. Sie können mit Hilfe von CSS !important mit der Grenze Erklärung versuchen (nicht btw empfohlen):

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

Obwohl outline ist kein Standard-Browser (AFAIK), in Bootstrap (wenn your'e sie oder eine andere simular Framework) outline selbst angewendet wird, obwohl es nicht im berechneten Stil angezeigt. Ich bin immer noch auf der Suche nach dieser Frage. Btw, ich habe border-radius nicht hinzugefügt, weil ich denke, dass Sie abgerundete Ecken wünschen, und es sollte kein Problem sein.

Answer 4

outline: none; wäre meine erste Schätzung.

Und auch würden Sie wahrscheinlich wie so

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


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

das macht es so den :focus Zustand und :hover Zustand entfernen möchten, wenn sie gedrückt wird, wird es nicht eine betonte Kontur haben. Wenn es nicht funktioniert, versuchen Sie, andere Stile wie box-shadow:none;, border-radius:none; zu entfernen.