Wie könnte ich einen type = "color" Eingang als Kreis anzeigen?

Question

Ich habe ein Formular mit vielen Farbeingaben. Ich verwende Boostrap und das Standard-Aussehen für eine Farbeingabe ist schrecklich, also habe ich mein eigenes CSS hinzugefügt, um es aufzuräumen. Ich habe die große weiße Grenze losgeworden, aber jetzt möchte ich sie als Kreis anstelle eines Quadrats anzeigen lassen. Ich möchte, dass es ein flacher Kreis ohne Grenze und vielleicht sogar mit einem leichten Schatten für ein Material Design-Look ist.

Dies ist eine meiner Farbeingang:

<div class="col-xs-1 menu-title-color-div color-input-div"> 
    <input type="color" id="menu-title-color-input" 
     class="form-control menu-data color-input menu-title-color-input" 
     name="MenuTitleColor"> 
</div> 

und die CSS ich das Aussehen zu gewinnen verwenden. (Wenn ich herausfinden, wie sie als Kreis angezeigt Ich werde diese CSS zu einem spezifischeren CSS-Selektor bewegen)

.form-control { 
    color: #ffffff; 
    background-color: inherit; 
    padding: 0;  
    border: none; 
    box-shadow: none; 
} 

Hier ist, wie es bisher aussieht. Es scheint auch immer noch eine dünne, graue Grenze um die Eingänge herum zu geben, aber ich kann mir auch nicht vorstellen, wie ich das beseitigen kann.

github

Answer 1

Ich hoffe, ich verstehe Sie richtig - Sie wollen diese drei Tasten Kreise anstelle von Quadraten sein? Oder möchtest du, dass das ganze div ein Quadrat ist?

So oder so, das ist eine Option, es zu tun, indem Sie den Radius zu manipulieren und eine Breite und Höhe einstellen:

.form-control { 
    color: #ffffff; 
    background-color: inherit; 
    padding: 0;  
    border: none; 
    box-shadow: none; 
width: 100%; 
height:100%; 
border-radius: 50%; 
}