Wie ändere ich den Rahmenstil des Kontrollkästchens in CSS?

122

Wie kann ich den Stil des Kontrollkästchens (Eingabe) ändern? Ich habe border:1px solid #1e5180es angelegt, aber in FireFox 3.5 passiert nichts!

html  css 
— Ricky
quelle

Antworten:

63

Wenn in einem Browser etwas passiert, wäre ich überrascht. Dies ist eines dieser herausragenden Formularelemente, bei denen Browser in der Regel nicht so viel stylen lassen und die normalerweise von Menschen durch Javascript ersetzt werden, damit sie etwas stylen / codieren können, das wie ein Kontrollkästchen aussieht und sich verhält.

— Sofia
quelle
4
Opera handhabt das Styling des Kontrollkästchens sehr gut. IE hat einige Stile, die das Kontrollkästchen umschließen (nicht das Kontrollkästchen selbst).
— Ehrfurcht
4
Sie sind heutzutage tatsächlich hässlich: D
— Gergely Fehérvári
1
sind im Jahr 2020 immer noch hässlich
— Paul
209

Ich schlage vor, "Gliederung" anstelle von "Grenze" zu verwenden. Zum Beispiel : outline: 1px solid #1e5180.

— Greg
quelle
3
Gliederung ist eine gute Alternative.
— Nippysaurus
4
Die Gliederung ist sehr gut und funktioniert für alle Eingabe- und Auswahlfelder, was sie für ".error" -Klassen nützlich macht.
— SztupY
2
Möglicherweise müssen Sie !importantIhrem CSS hinzufügen , wenn Sie Gliederung verwenden. Ich habe dies in Firefox 12.0 getestet und ohne! Wichtig würde der Umriss verschwinden, solange ich auf das Kontrollkästchen klickte.
— Weezle
3
Dies ist eine großartige Alternative, aber das Problem der Gliederung ist, dass es in IE7 nicht funktioniert !!
— Yises
13
@Yises Sie müssen sich um IE7 sorgen? Huch, es tut mir leid.
— Theblang
71

Du solltest benutzen

-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;

Dann entfernen Sie das Standard-Kontrollkästchen Bild / Stil und können es formatieren. Auf jeden Fall wird es in Firefox noch eine Grenze geben

— Valerij
quelle
2
Mit Opera können Sie Kontrollkästchen ohne zusätzliche Hackerei gestalten - ich würde den Stil -o-Erscheinungsbild weglassen. -moz-Aussehen und -webkit-Aussehen sind jedoch großartig.
— Neall
7
Ups - sprach zu früh: "-webkit-Aussehen: keine;" scheint das Verhalten des Kontrollkästchens zu deaktivieren.
— Neall
6
Für mich (Chrom 5) ist dies nicht der Fall. Sie müssen den Status "Überprüft" extra stylen
— Valerij
1
Das Erscheinungsbild war noch nie Teil des CSS-Standards gewesen. Benutze es nicht.
— Evgeny
Wow, das ist großartig. Ich werde Plugins loswerden. Ich kann alles machen => | Eingabe [Typ = Kontrollkästchen] | Eingabe [Typ = Kontrollkästchen]: Hover | Eingabe [Typ = Kontrollkästchen]: aktiviert | Eingabe [Typ = Kontrollkästchen]:
— aktiviert
21

Sie können Kastenschatten verwenden, um einen Rand zu fälschen:

-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
— Dennis Heiden
quelle
@retrovertigo welche Version?
— Dennis Heiden
Version 12.0.2 (14606.3.4) / spätestens unter macOS 10.14
— retrovertigo
@retrovertigo Ich habe meine Lösung getestet und Sie haben Recht. Meine Antwort funktioniert ohne weitere Änderungen nicht für Safari (wie -webkit-Erscheinungsbild: keine;). 3 Jahre später würde ich die Lösungen von PendingFox oder Adan verwenden. Aber ich werde versuchen, meine Antwort innerhalb einiger Wochen zu verlängern. Danke für deine Rückmeldung.
— Dennis Heiden
11

Hier ist eine reine browserübergreifende CSS-Lösung (keine Bilder), die auf Martins benutzerdefinierten Kontrollkästchen und Optionsfeldern mit CSS3-LINK basiert: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-css3-revisited /

Hier ist eine jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/

Ich habe dies in folgenden Browsern getestet:

  • FireFox (41.0.2) (42)
  • Google Chrome (46.0.2490.80 m)
  • Opera (33.0.1990.43)
  • Internet Explorer (11.0.10240.16431 [Update-Versionen: 11.0.22])
  • Microsoft Edge (20.10240.16384.0)
  • Safari Mobile iPhone iOS9 (601.1.46)

label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}
 
label *,
label *
{
    cursor: pointer;
}
 
input[type="radio"],
input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}
 
input[type="radio"] + span,
input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}
 
label:hover span::before,
label:hover span::before
{
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}
 
label:hover span,
label:hover span
{
    color: #000;
}
 
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
     
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
     
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}
 
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
    color: #666;
}
 
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
    cursor: default;
     
    -moz-opacity: .4;
    -webkit-opacity: .4;
    opacity: .4;
}
 
input[type="checkbox"] + span::before
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
 
input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 30px;
    margin-top: -1px;
}
 
input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}



input[class="blue"] + span::before
{
    border: solid 1px blue;
    background: #B2DBFF;
    background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
    background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
    background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
    background: -o-radial-gradient(#B2DBFF, #dfdfdf);
    background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
    color: darkblue;
}



input[class="red"] + span::before
{
    border: solid 1px red;
    background: #FF9593;
    background: -moz-radial-gradient(#FF9593, #dfdfdf);
    background: -webkit-radial-gradient(#FF9593, #dfdfdf);
    background: -ms-radial-gradient(#FF9593, #dfdfdf);
    background: -o-radial-gradient(#FF9593, #dfdfdf);
    background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
    color: darkred;
}
 <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-02"  class="blue" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-03"  class="red" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>
Erweitern Sie das Snippet

— Adan Rehtla
quelle
10

Ich bin veraltet, ich weiß. Aber eine kleine Problemumgehung wäre, Ihr Kontrollkästchen in ein Etiketten-Tag zu setzen und das Etikett dann mit einem Rand zu versehen:

<label class='hasborder'><input type='checkbox' /></label>

Stylen Sie dann das Etikett:

.hasborder { border:1px solid #F00; }
— Hussam
quelle
1
Beachten Sie auch, dass das Beschriftungselement das Kontrollkästchen bei jedem Klicken aktiviert, auch wenn das Kontrollkästchen darin nicht sichtbar ist. Auf dem Etikett können Sie also so etwas tun label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }und dann label > input[type=checkbox] { position: absolute; left: -999px; }können Sie Ihr eigenes Kontrollkästchen individuell gestalten und das ursprüngliche Kontrollkästchen wird weiterhin aktiviert / deaktiviert, aber der Benutzer wird es nicht sehen. Sie sehen nur Ihr benutzerdefiniertes Kontrollkästchen.
— Gavin
1
Das Hinzufügen wurde vergessen, und Sie können Selektoren wie :hoverund :checkedzum Formatieren anderer Status Ihres benutzerdefinierten Kontrollkästchens verwenden.
— Gavin
10

Hier ist meine Version, die FontAwesome als Kontrollkästchen verwendet. Ich denke, FontAwesome wird von fast jedem verwendet, daher kann man davon ausgehen, dass Sie es auch haben. Nicht in IE / Edge getestet und ich denke, niemand kümmert sich darum.

input[type=checkbox] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;	
}

input[type=checkbox]:before {
	font-family: "FontAwesome";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fef2e0;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

	color: black !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<input type="checkbox">
Erweitern Sie das Snippet

— anstehender Fuchs
quelle
9

Für Firefox , Chrome und Safari passiert nichts.

Für IE der Rahmen außerhalb des Kontrollkästchens angewendet (nicht als Teil des Kontrollkästchens), und der "ausgefallene" Schattierungseffekt im Kontrollkästchen ist weg (wird als altmodisches Kontrollkästchen angezeigt).

Für Opera wendet der Rahmenstil den Rand tatsächlich auf das Kontrollkästchenelement an.
Opera behandelt auch andere Stile auf dem Kontrollkästchen besser als andere Browser: Farbe wird als Farbe des Häkchens angewendet , Hintergrundfarbe wird als Hintergrundfarbe innerhalb des Kontrollkästchens angewendet (IE wendet den Hintergrund so an, als ob sich das Kontrollkästchen in einem <div>mit Hintergrund befindet). .

Fazit

Die einfachste Lösung besteht darin, das Kontrollkästchen in ein Feld zu verpacken, <div>wie es andere vorgeschlagen haben.
Wenn Sie das Erscheinungsbild vollständig steuern möchten, müssen Sie sich für den erweiterten Bild- / Javascript-Ansatz entscheiden, der auch von anderen entwickelt wurde.

— Scheu
quelle
2
+1 für die Forschung, aber es in eine Div zu wickeln ist keine Lösung. Es ist können Sie das Kontrollkästchen nicht Stil, es lässt Sie Stil rund um das Kontrollkästchen, wenn Sie mit dem Versuch , zu spielen beginnen , es zu verbergen und übermalen , die ihre eigenen Probleme haben wird.
Nun, der einzige Browser, mit dem Sie das Kontrollkästchen selbst gestalten können, ist Opera. Das Einwickeln in ein Div ist eine Lösung, die zwar gut genug ist, aber wirklich davon abhängt, was Sie wollen. IE verhält sich tatsächlich so, als würden Sie es in ein div einfügen, wenn Sie versuchen, das Kontrollkästchen zu formatieren!
— Ehrfurcht
7

Das Stylen von Kontrollkästchen (und vielen anderen Eingabeelementen für dieses Material) ist mit reinem CSS nicht wirklich möglich, wenn Sie das visuelle Erscheinungsbild drastisch ändern möchten.

Am besten implementieren Sie etwas wie jqTransform , das Ihre Eingaben durch Bilder ersetzt und Javascript-Verhalten anwendet, um ein Kontrollkästchen (oder ein anderes Element) nachzuahmen.

— ChrisR
quelle
4

Nein, Sie können das Kontrollkästchen selbst immer noch nicht formatieren, aber ich habe (endlich) herausgefunden, wie eine Illusion formatiert werden kann, während die Funktionalität des Klicken auf ein Kontrollkästchen beibehalten wird. Dies bedeutet, dass Sie es umschalten können, auch wenn der Cursor nicht perfekt stillsteht, ohne das Risiko einzugehen, Text auszuwählen oder Drag & Drop auszulösen!

Das Beispiel verwendet eine span-Schaltfläche sowie Text in einer Beschriftung. Sie erhalten jedoch eine Vorstellung davon, wie Sie das Kontrollkästchen unsichtbar machen und alles dahinter zeichnen können.

Diese Lösung passt wahrscheinlich auch zu Optionsfeldern.

Das Folgende funktioniert in IE9, FF30.0 und Chrome 40.0.2214.91 und ist nur ein einfaches Beispiel. Sie können es weiterhin in Kombination mit Hintergrundbildern und Pseudoelementen verwenden.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* make it transparent */
    z-index: 666; /* place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>
— LGT
quelle
2

Hier ist eine einfache Möglichkeit (vor oder nach Pseudoelementen / Klassen zu verwenden):

input[type=checkbox] {
    position: relative;
}

input[type=checkbox]:after {
    position: absolute;
    top: 0;
    left: 0;
    /* Above three lines allow the checkbox:after position at checkbox's position */
    content: '';
    width: 32px;
    height: 32px;
    z-index: 1; /* This allows the after overlap the checkbox */
    /* Anything you want */
}
— Alex Fang
quelle
Ich denke, dies ist eine clevere Möglichkeit, Ihr Kontrollkästchen und ähnliches neu zu gestalten.
— Alex Fang
1
Funktioniert nicht mit Firefox und IE. Noch wichtiger ist, dass es sich um eine falsche Implementierung von Chrome handelt, da leere Elemente KEINEN Inhalt haben dürfen.
— Leo
Leo, du interpretierst den Begriff "Inhalt" falsch. Alles, was darin steht, ist, dass diese leeren Elemente keinen Inhalt dazwischen haben können, weil es kein schließendes Tag gibt. Beispiel: <a> Inhalt </a> hat ein schließendes Tag, sodass zwischen diesen Tags ein Inhalt vorhanden sein kann. Die Eingabe hat jedoch nicht das schließende Tag, sodass der Inhalt grundsätzlich nicht vorhanden sein kann. Andererseits haben Pseudoelemente eine Eigenschaft namens "Inhalt", die überall verwendet werden darf.
— Pendingfox
-1 

<!DOCTYPE html>
<html>
<head>
<style> 

.abc123
{
	-webkit-appearance:none;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: #FFFFFF;
	border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
  content: "";
  display: inline-block;
  position: relative;
  top: -3px;
  left: 4px;
  width: 3px;
  height: 5px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
}

input[type=checkbox]:checked   {
    background: #327DFF;
    outline: none;
    border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
	outline: none;
}

input:hover {
   border: 1px solid rgba(50,125,255,1);
}

</style>
</head>
<body>

<input class="abc123" type="checkbox"></input>


</body>
</html>
Erweitern Sie das Snippet

— KeepLearn
quelle
Erstens: ": after" create √; Zweitens: "-webkit-Erscheinungsbild: keine" Der Origion-Stil konnte nicht funktionieren, und dann können Sie Ihren Stil definieren.
— KeepLearn
2
Bitte schreiben Sie eine kurze Beschreibung Ihrer Antwort.
— Angel F Syrus
-5

Setze es in ein Div und füge dem Div einen Rand hinzu

— Midhat
quelle
5
Dann haben Sie einen doppelten Rand.
— Egor Pavlikhin
<div style = "border-style: solid; width: 120px;"> <input type = "checkbox" name = "mycheck"> Mein Kontrollkästchen </ input> </ div> funktioniert gut mit htmlsandbox
— Midhat
8
Definieren Sie "funktioniert gut". Zum Beispiel habe ich noch nie ein Kontrollkästchen mit einer Breite von 120 Pixel gesehen.
-8 
<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>
— Midhat
quelle
7
@lexu Es gibt keine </ input>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.