Jak zmienić styl obramowania checkboxa w CSS?

122

Jak mogę zmienić styl obramowania (wejściowego) pola wyboru? Włożyłem border:1px solid #1e5180to, ale w FireFox 3.5 nic się nie dzieje!

html css Ricky
źródło

63

Gdyby coś się stało w którejkolwiek przeglądarce, byłbym zaskoczony. Jest to jeden z tych wyjątkowych elementów formularza, których przeglądarki zwykle nie pozwalają na zbyt wiele stylów, a ludzie zwykle próbują zastąpić je javascriptem, aby mogli nadać styl / kod, aby coś wyglądało i działało jak pole wyboru.

Sofia
źródło

4

Opera bardzo dobrze radzi sobie ze stylizacją na checkboxie. IE ma styl, który zawija się wokół pola wyboru (nie na samym polu wyboru).

awe

4

Obecnie są brzydcy: D

Gergely Fehérvári,

1

są nadal brzydkie w 2020 roku

Paweł

210

Sugeruję użycie „konspektu” zamiast „obramowania”. Na przykład: outline: 1px solid #1e5180.

Greg
źródło

3

Kontur to świetna alternatywa.

Nippysaurus,

4

konspekt jest bardzo dobry i działa dla wszystkich pól wejściowych i zaznaczania, dzięki czemu jest przydatny dla klas „.error”.

SztupY

2

Jeśli !importantużywasz konspektu, może być konieczne dodanie do twojego css. Testowałem to w Firefoksie 12.0 i bez! Ważne, zarys znikałby tak długo, jak klikałem pole wyboru.

Weezle

3

To świetna alternatywa, ale problem z konspektem polega na tym, że w IE7 nie działa !!

Yises,

13

@Yises Musisz się martwić o IE7? Ups, przepraszam.

theblang

71

Powinieneś użyć

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

Następnie pozbędziesz się domyślnego obrazu / stylu pola wyboru i możesz go zmienić. W każdym razie w Firefoksie nadal będzie tam obramowanie

Valerij
źródło

2

Opera umożliwia stylizowanie pól wyboru bez dodatkowych hakerów - zostawiłbym styl -o-look. -moz-wygląd i -webkit-wygląd są jednak świetne.

Neall

7

Ups - odezwał się za szybko: "-webkit-przypominanie: brak;" wydaje się wyłączać zachowanie pola wyboru.

Neall

6

u mnie (chrome 5) nie działa, trzeba stylizować: stan sprawdzony extra

Valerij

1

wygląd nigdy nie był częścią standardu CSS. Nie używaj tego.

Evgeny

wow, to jest niesamowite, pozbędę się wtyczek. mogę zrobić wszystko => | wejście [typ = pole wyboru] | input [type = checkbox]: hover | wejście [typ = pole wyboru]: zaznaczone | wejście [typ = pole wyboru]: zaznaczone: po ...

h0mayun

21

Możesz użyć cieni prostokątnych do sfałszowania obramowania:

-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
źródło

@retrovertigo która wersja?

Dennis Heiden

Wersja 12.0.2 (14606.3.4) / najnowsza na macOS 10.14

retrovertigo

@retrovertigo Przetestowałem swoje rozwiązanie i masz rację. Moja odpowiedź nie działa dla Safari bez dalszych modyfikacji (takich jak -webkit-look: none;). 3 lata później skorzystałbym z rozwiązań podanych przez pendingfox lub Adan. Ale spróbuję przedłużyć swoją odpowiedź w ciągu kilku tygodni. Dziękujemy za twoją opinię.

Dennis Heiden

11

Oto czyste rozwiązanie CSS (bez obrazów) dla różnych przeglądarek, oparte na niestandardowych polach wyboru Martina i przyciskach radiowych z łączem CSS3: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-css3-revisited /

Oto jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/

Przetestowałem to na następujących przeglądarkach:

FireFox (41.0.2) (42)
Google Chrome (46.0.2490.80 m)
Opera (33.0.1990.43)
Internet Explorer (11.0.10240.16431 [wersje aktualizacji: 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>

Rozwiń fragment

Adan Rehtla
źródło

10

Wiem, że jestem przestarzały ... Ale małym obejściem byłoby umieszczenie pola wyboru w tagu etykiety, a następnie stylizowanie etykiety za pomocą obramowania:

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

następnie stylizuj etykietę:

.hasborder { border:1px solid #F00; }

Hussam
źródło

1

Pamiętaj również, że element etykiety zaznaczy pole wyboru po każdym kliknięciu, nawet jeśli pole wyboru nie jest widoczne wewnątrz niego. Więc na etykiecie możesz zrobić coś takiego, label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }a następnie label > input[type=checkbox] { position: absolute; left: -999px; }To pozwoli ci dostosować własne pole wyboru, a oryginalne pole wyboru będzie nadal zaznaczane / odznaczane, ale użytkownik go nie zobaczy. Będą widzieć tylko Twoje niestandardowe pole wyboru.

Gavin

1

Zapomniałeś dodać, możesz użyć selektorów, takich jak :hoveri, :checkedaby stylizować inne stany niestandardowego pola wyboru.

Gavin

10

Oto moja wersja, która używa FontAwesome jako elementu zaznaczania pola wyboru. Myślę, że FontAwesome jest używany przez prawie wszystkich, więc można bezpiecznie założyć, że Ty też go masz. Nie testowane w IE / Edge i chyba nikogo to nie obchodzi.

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">

Rozwiń fragment

pendingfox
źródło

9

W przypadku przeglądarek Firefox , Chrome i Safari nic się nie dzieje.

W IE obramowanie jest stosowane poza polem wyboru (nie jako część pola wyboru), a „fantazyjny” efekt cieniowania w polu wyboru zniknął (wyświetlany jako staroświeckie pole wyboru).

W przypadku Opery styl obramowania w rzeczywistości nakłada obramowanie na element pola wyboru.
Opera radzi sobie również z innymi stylami na polu wyboru lepiej niż inne przeglądarki: kolor jest stosowany jako kolor zaznaczenia, kolor tła jest stosowany jako kolor tła wewnątrz pola wyboru (tj. Stosuje tło tak, jakby pole wyboru znajdowało się wewnątrz a <div>z tłem)) .

Wniosek

Najłatwiejszym rozwiązaniem jest umieszczenie pola wyboru <div>tak, jak sugerowali inni.
Jeśli chcesz całkowicie kontrolować wygląd, będziesz musiał zastosować zaawansowane podejście do obrazu / javascript, również przeznaczone dla innych.

groza
źródło

2

+1 do badań, ale umieszczenie ich wewnątrz elementu div nie jest rozwiązaniem. Nie pozwala na stylizację pola wyboru, pozwala na stylizację wokół pola wyboru, chyba że zaczniesz bawić się próbą ukrycia go i zamalowania, co będzie miało własne problemy.

Cóż, jedyną przeglądarką, która umożliwia stylizowanie samego pola wyboru, jest Opera. Umieszczenie go w elemencie div to rozwiązanie, które może być wystarczająco dobre, ale tak naprawdę zależy od tego, czego chcesz. IE faktycznie zachowuje się tak, jakbyś umieścił go w div, jeśli spróbujesz stylizować pole wyboru!

awe

7

Stylizowanie pól wyboru (i wielu innych elementów wejściowych dla tej materii) nie jest tak naprawdę możliwe w przypadku czystego CSS, jeśli chcesz radykalnie zmienić wygląd wizualny.

Najlepszym rozwiązaniem jest zaimplementowanie czegoś takiego jak jqTransform , które faktycznie zastępuje dane wejściowe obrazami i stosuje do nich zachowanie javascript, aby naśladować pole wyboru (lub inny element w tym zakresie)

ChrisR
źródło

4

Nie, nadal nie możesz stylizować samego pola wyboru, ale (w końcu) wymyśliłem, jak stylizować iluzję, zachowując funkcjonalność klikania pola wyboru. Oznacza to, że możesz to przełączyć, nawet jeśli kursor nie jest idealnie nieruchomy, bez ryzyka zaznaczenia tekstu lub uruchomienia funkcji przeciągnij i upuść!

Przykładem jest użycie „przycisku” zakresu, a także tekstu na etykiecie, ale daje on wyobrażenie, jak można uczynić pole wyboru niewidocznym i narysować wszystko za nim.

To rozwiązanie prawdopodobnie pasuje również do przycisków radiowych.

Poniższe działa w IE9, FF30.0 i Chrome 40.0.2214.91 i jest tylko podstawowym przykładem. Nadal możesz go używać w połączeniu z obrazami tła i pseudoelementami.

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
źródło

2

Oto prosty sposób (do użycia przed lub po pseudoelementach / klasach):

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
źródło

Myślę, że to sprytny sposób na zmianę stylu pola wyboru i czegokolwiek podobnego.

Alex Fang

1

Nie działa w przeglądarkach Firefox i IE. Co ważniejsze, jest to niepoprawna implementacja Chrome, ponieważ puste elementy NIE mogą mieć żadnych treści.

Leo

Leo, błędnie interpretujesz termin „zawartość”. Mówi się tylko, że te puste elementy nie mogą mieć zawartości pomiędzy nimi, ponieważ nie ma tagu zamykającego. na przykład <a> treść </a> ma tag zamykający, więc między tymi tagami może znajdować się treść. ale wejście nie ma zamykającego znacznika, więc z zasady nie może mieć zawartości. Z drugiej strony, pseudoelementy mają właściwość o nazwie „content”, której można używać wszędzie.

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>

Rozwiń fragment

KeepLearn
źródło

Po pierwsze: „: po” utwórz √; Po drugie: „-webkit-look: none” niech styl początkowy nie zadziała, a następnie możesz zdefiniować swój styl.

KeepLearn,

2

Napisz krótki opis swojej odpowiedzi.

Angel F Syrus

-5

umieść go w div i dodaj obramowanie do div

Midhat
źródło

5

Wtedy będziesz miał podwójną ramkę.

Egor Pavlikhin

<div style = "border-style: solid; width: 120px;"> <input type = "checkbox" name = "mycheck"> Moje pole wyboru </input> </div> działa dobrze z htmlsandbox

Midhat

8

Zdefiniuj „działa dobrze”. Na przykład nigdy nie widziałem pola wyboru o szerokości 120 pikseli.

-8

<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>

Midhat
źródło

7

@lexu Nie ma czegoś takiego jak </input>

Jak zmienić styl obramowania checkboxa w CSS?

Odpowiedzi:

Wniosek