Wählen Sie das gleiche Umrissstyling wie eine Eingabe

Question

Meine Anforderung ist, dass ausgewählte Elemente scharfe Kanten haben, wie ich es mit dem Markup und CSS im Code getan habe.

Das Problem ist, ich möchte die Auswahlen das gleiche Styling wie die Eingänge haben, wenn sie den Fokus haben.

Die Eingänge haben einen Rahmen und eine Kontur.

Ich kann den gleichen Effekt mit der Auswahl erhalten, aber die Grenze ist gerundet, wenn sie den Fokus haben, da ich Gliederung zweimal nicht verwenden kann.

Gibt es einen Weg dahin?

div { 
 
    margin: 10px 0; 
 
} 
 

 
input[type="text"] { 
 
    border: 1px solid #727272; 
 
} 
 

 
input[type="text"]:focus { 
 
    border: 2px solid #0065bd; 
 
    outline: 3px solid #ffbf47; 
 
    outline-offset: 0; 
 
} 
 

 
select { 
 
    outline: 1px solid #727272; 
 
} 
 

 
select:focus { 
 
    border: 2px solid #0065bd; 
 
    outline: 3px solid #ffbf47; 
 
    outline-offset: 0; 
 
}

<div> 
 
    <input type="text" /> 
 
</div> 
 
<div> 
 
    <select> 
 
    <option>One</option> 
 
    <option>Two</option> 
 
    </select> 
 
</div>

Answer 1

Versuchen Sie folgendes:

select {  
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
} 

Answer 2

FWIW, nicht immer in Version 62.0.3202.62 (Official Erstellung) (64-Bit) Runden.