Cum să stil o casetă de selectare folosind CSS

Question

Mai mult

Question

Cum să stil o casetă de selectare folosind CSS

Am încercat să stil o casetă de selectare se utilizează următoarele:

<input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" />

Dar stilul nu este aplicată. Caseta de selectare afișează încă default stil. Cum pot da specificate stil?

Peter Mortensen

Întrebarea editată 17 iulie 2019 в 3:35

Programare

html

css

checkbox

Solution / Answer

Blake Pettersson

30 august 2012 в 8:59

Mai mult

Există o modalitate de a face acest lucru, folosind doar CSS. Putem (ab)utilizarea de "etichetă" element de stil și ca element în loc. Avertismentul este că acest lucru nu va lucra pentru Internet Explorer 8 și versiuni mai mici.

.myCheckbox input {
  position: relative;
  z-index: -9999;
}

.myCheckbox span {
  width: 20px;
  height: 20px;
  display: block;
  background: url("link_to_image");
}

.myCheckbox input:checked + span {
  background: url("link_to_another_image");
}

<label for="test">Label for my styled "checkbox"</label>
<label class="myCheckbox">
  <input type="checkbox" name="test" />
  <span></span>
</label>

138

0

Josh Mc

9 iunie 2013 в 1:16

Mai mult

Puteți obține destul de rece personalizat selectare efect prin utilizarea de noi abilități care vin cu :după "și": înainte de pseudo clase. Avantajul la acest lucru, este: Tu nu't nevoie să adăugați ceva mai mult la DOM, doar standard de selectare.

Notă aceasta va funcționa doar pentru browserele compatibile. Cred că acest lucru este legat de faptul că unele browsere nu vă permit să setați :după "și": înainte de pe elemente de intrare. Ceea ce înseamnă că, din păcate, pentru moment, numai browsere WebKit sunt acceptate. Firefox + Internet Explorer va permite în continuare casetele de selectare pentru a funcționa, doar unstyled, și să sperăm că aceasta va schimba în viitor (codul nu folosesc prefixe furnizor).

Acesta este un browser-ul WebKit soluție numai (Chrome, Safari, browsere Mobile)

A Se Vedea Exemplul De Vioară

$(function() {
  $('input').change(function() {
    $('div').html(Math.random());
  });
});

/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}

/* Custom checkbox */
.myinput.large.custom[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput.large.custom[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGHRFWHRBdXRob3IAbWluZWNyYWZ0aW5mby5jb23fZidLAAAAk0lEQVQ4y2P4//8/AyUYwcAD+OzN/oMwshjRBoA0Gr8+DcbIhhBlAEyz+qZZ/7WPryHNAGTNMOxpJvo/w0/uP0kGgGwGaZbrKgfTGnLc/0nyAgiDbEY2BCRGdCDCnA2yGeYVog0Aae5MV4c7Gzk6CRqAbDM2w/EaQEgzXgPQnU2SAcTYjNMAYm3GaQCxNuM0gFwMAPUKd8XyBVDcAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table style="width:100%">
  <tr>
    <td>Normal:</td>
    <td><input type="checkbox" /></td>
    <td><input type="checkbox" checked="checked" /></td>
    <td><input type="checkbox" disabled="disabled" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" /></td>
  </tr>
  <tr>
    <td>Small:</td>
    <td><input type="checkbox" class="myinput" /></td>
    <td><input type="checkbox" checked="checked" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput" /></td>
  </tr>
  <tr>
    <td>Large:</td>
    <td><input type="checkbox" class="myinput large" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large" /></td>
  </tr>
  <tr>
    <td>Custom icon:</td>
    <td><input type="checkbox" class="myinput large custom" /></td>
    <td><input type="checkbox" checked="checked" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" class="myinput large custom" /></td>
    <td><input type="checkbox" disabled="disabled" checked="checked" class="myinput large custom" /></td>
  </tr>
</table>

Bonus Webkit stil flipswitch vioara

$(function() {
  var f = function() {
    $(this).next().text($(this).is(':checked') ? ':checked' : ':not(:checked)');
  };
  $('input').change(f).trigger('change');
});

body {
  font-family: arial;
}

.flipswitch {
  position: relative;
  background: white;
  width: 120px;
  height: 40px;
  -webkit-appearance: initial;
  border-radius: 3px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  outline: none;
  font-size: 14px;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  cursor: pointer;
  border: 1px solid #ddd;
}

.flipswitch:after {
  position: absolute;
  top: 5%;
  display: block;
  line-height: 32px;
  width: 45%;
  height: 90%;
  background: #fff;
  box-sizing: border-box;
  text-align: center;
  transition: all 0.3s ease-in 0s;
  color: black;
  border: #888 1px solid;
  border-radius: 3px;
}

.flipswitch:after {
  left: 2%;
  content: "OFF";
}

.flipswitch:checked:after {
  left: 53%;
  content: "ON";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<h2>Webkit friendly mobile-style checkbox/flipswitch</h2>
<input type="checkbox" class="flipswitch" />  
<span></span>
<br>
<input type="checkbox" checked="checked" class="flipswitch" />  
<span></span>

134

0

SW4

5 ianuarie 2015 в 11:59

Mai mult

Înainte de a începe (Jan 2015)

Întrebarea și răspunsul sunt acum ~5 ani. Ca atare, acest lucru este un pic de o actualizare.

În primul rând, există un număr de abordări atunci când vine vorba de styling casetele de selectare. principiul de bază este:

Veți avea nevoie pentru a ascunde caseta implicit de control care este un stil de browser-ul dvs., și nu poate fi suprascrisă într-un mod semnificativ, folosind CSS.
Cu controlul ascunse, va trebui în continuare să fie capabil de a detecta și de a comuta verificat de stat
A verificat starea de selectare va trebui să fie reflectată de styling un element nou

Soluția (în principiu)

Cele de mai sus poate fi realizată printr-o serie de mijloace - și veți auzi de multe ori folosind CSS3 pseudo-elemente este calea cea dreaptă. De fapt, nu există nici o modalitate corectă sau greșită, depinde de modul de abordare cel mai potrivit pentru contextul va fi folosind-o în. Asta a spus, am una preferată.

Înfășurați-vă de selectare într-o "etichetă" element. Acest lucru va însemna că, chiar și atunci când este ascunsă, încă puteți comuta verificat de stat pe clic oriunde în cadrul etichetei.
Ascunde caseta de selectare
Adăugați un element nou după caseta care va stilul în mod corespunzător. Acesta trebuie să apară după selectare astfel încât acesta poate fi selectat folosind CSS și stil depinde de :verificat de stat. CSS se poate selecta 'invers'.

Soluția (în cod)

label input {
  visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */
  display: block;
  height: 0;
  width: 0;
  position: absolute;
  overflow: hidden;
}
label span {/* <-- Style the artificial checkbox */
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
}
[type=checkbox]:checked + span {/* <-- Style its checked state */
  background: black;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

Rafinament (folosind icoane)

Dar hei! Am auzit că striga. Ce zici dacă vreau să arate un pic mai frumos bifați sau cruce în cutie? Și eu nu't doriți să utilizați imagini de fundal!

Ei bine, acest lucru este în cazul în care CSS3's pseudo-elementele pot intra în joc. Aceste sprijin "conținutul" de proprietate, care vă permite pentru a injecta Unicode icoane reprezintă nici un stat. Alternativ, ai putea folosi o terță parte icon font source, cum ar fi font minunat (deși, asigurați-vă că seta, de asemenea, relevante font-family, de exemplu, pentru a FontAwesome)

label input {
  display: none; /* Hide the default checkbox */
}

/* Style the artificial checkbox */
label span {
  height: 10px;
  width: 10px;
  border: 1px solid grey;
  display: inline-block;
  position: relative;
}

/* Style its checked state...with a ticked icon */
[type=checkbox]:checked + span:before {
  content: '\2714';
  position: absolute;
  top: -5px;
  left: 0;
}

<label>
  <input type='checkbox'>
  <span></span>
  Checkbox label text
</label>

Peter Mortensen

Răspuns editat 17 iulie 2019 в 10:50

126

0

Jan Turoň

30 septembrie 2015 в 9:43

Mai mult

Am'd urmați sfatul SW4's a răspunde – pentru a ascunde caseta și să-l acopere cu un custom span, sugerând acest HTML:

<label>
  <input type="checkbox">
  <span>send newsletter</span>
</label>

Wrap în eticheta frumos vă permite clic pe text fără a fi nevoie de "pentru-id-ul" atribut de legătură. Cu toate acestea,

Nu-l ascunde, folosind `visibility: hidden " sau " display: none`

Acesta funcționează, făcând clic sau apăsând, dar asta este un jalnic mod de a utiliza casetele de selectare. Unii oameni încă mai folosesc mult mai eficient Fila pentru a muta focalizarea, Spațiu pentru a activa, și ascunde cu această metodă se dezactivează. Dacă formularul este lung, o va salva pe cineva's încheieturile pentru a folosi tabindex " sau " tasta de acces` atribute. Și dacă observați sistemul de selectare comportament, există o decent umbra pe hover. Bine stil de selectare ar trebui să urmeze acest comportament.

cobberboy's a răspunde recomandă Awesome Font, care este, de obicei, mai bine decât bitmap de fonturi sunt scalabile vectori. De lucru cu HTML de mai sus, am'd sugera aceste reguli CSS:

a Ascunde casetele de selectare

input[type="caseta"] { position: absolute; opacitate: 0; z-index: -1; }

Eu folosesc doar negativ z-index din exemplul meu foloseste destul de mare de selectare a pielii pentru a acoperi pe deplin. Eu nu't recomanda left: -999px, deoarece acesta nu este reutilizabil în fiecare aspect. Bushan wagh's a răspunde oferă o antiglonț mod de a ascunde și de a convinge browser-ul pentru a utiliza tabindex, așa că este o bună alternativă. Oricum, ambele este doar un hack. Modul corect de astăzi este aspectul: none`, a se vedea Joost's a răspunde:

input[type="caseta"] { aspect: nici unul; -webkit-aspect: nici unul; -moz-aspect: nici unul; }

Stil de selectare etichetă

input[type="caseta"] + span { font: 16pt sans-serif; color: #000; }

Adăugați caseta de piele

input[type="caseta"] + durata:înainte de { font: 16pt FontAwesome; conținut: '\00f096'; display: inline-block; lățime: 16pt; padding: 2px 0 0 3px; marja de-dreapta: 0.5 em; }

\00f096 este Font Minunat's square-o, umplutură este ajustat pentru a oferi chiar punctate contur pe focus (a se vedea mai jos).

Adăugați caseta verificate piele

input[type="caseta"]:verificat + durata:înainte de { conținut: '\00f046'; }

\00f046 este Font Minunat's check-pătrat-o, care nu este aceeași lățime ca square-o, care este motivul pentru lățime de stil de mai sus.

Adăugați accent contur

input[type="caseta"]:focus + durata:înainte de { schiță: 1px punctată #aaa; }

Safari nu't oferi această funcție (a se vedea @Jason Sankey's comentariu), ar trebui să utilizați fereastra.navigator` pentru a detecta browser-ul și sări dacă este Safari.

Set culoare gri pentru persoane cu handicap selectare

input[type="caseta"]:dezactivat + span { culoare: #999; }

Set hover umbra pe non-handicap selectare

input[type="caseta"]:nu(:dezactivat) + durata:hover:înainte de { text-shadow: 1px 0 2px #77F; }

Demo de Vioară

Încercați să treceți mouse-ul peste casetele de selectare și de a folosi Fila și Schimbare+Fila pentru a muta și Spațiu pentru a comuta.

33

0

Jake

17 august 2013 в 9:22

Mai mult

Puteți casetele de selectare de stil, cu un pic de șmecherie folosind "etichetă" element un exemplu este dat mai jos:

.checkbox > input[type=checkbox] {
  visibility: hidden;
}

.checkbox {
  position: relative;
  display: block;
  width: 80px;
  height: 26px;
  margin: 0 auto;
  background: #FFF;
  border: 1px solid #2E2E2E;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
}

.checkbox:after {
  position: absolute;
  display: inline;
  right: 10px;
  content: 'no';
  color: #E53935;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox:before {
  position: absolute;
  display: inline;
  left: 10px;
  content: 'yes';
  color: #43A047;
  font: 12px/26px Arial, sans-serif;
  font-weight: bold;
  text-transform: capitalize;
  z-index: 0;
}

.checkbox label {
  position: absolute;
  display: block;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 20px;
  background: #2E2E2E;
  cursor: pointer;
  transition: all 0.5s linear;
  -webkit-transition: all 0.5s linear;
  -moz-transition: all 0.5s linear;
  border-radius: 2px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  z-index: 1;
}

.checkbox input[type=checkbox]:checked + label {
  left: 43px;
}

<div class="checkbox">
  <input id="checkbox1" type="checkbox" value="1" />
  <label for="checkbox1"></label>
</div>

Și o VIOARA pentru codul de mai sus. Rețineți că unele CSS nu't de lucru în versiunile mai vechi de browsere, dar am'm sigur că există niște exemple JavaScript acolo!

30

0

Mohamed Nor

4 ianuarie 2017 в 9:45

Mai mult

Simplu de implementat și ușor de personalizat soluție

După o mulțime de cercetare și testare am primit această soluție, care este simplu de implementat și ușor pentru a personaliza. În această soluție:

Nu't nevoie de biblioteci externe și fișiere
Nu't nevoie pentru a adăuga în plus HTML în pagina dvs.
Nu't nevoie pentru a schimba caseta nume și id-ul

Simplu pune curge CSS la partea de sus a paginii și toate casetele de selectare stil va modifica astfel:

input[type=checkbox] {
  transform: scale(1.5);
}

input[type=checkbox] {
  width: 30px;
  height: 30px;
  margin-right: 8px;
  cursor: pointer;
  font-size: 17px;
  visibility: hidden;
}

input[type=checkbox]:after {
  content: " ";
  background-color: #fff;
  display: inline-block;
  margin-left: 10px;
  padding-bottom: 5px;
  color: #00BFF0;
  width: 22px;
  height: 25px;
  visibility: visible;
  border: 1px solid #00BFF0;
  padding-left: 3px;
  border-radius: 5px;
}

input[type=checkbox]:checked:after {
  content: "\2714";
  padding: -5px;
  font-weight: bold;
}

Peter Mortensen

Răspuns editat 17 iulie 2019 в 10:40

25

0

Vadim Ovchinnikov

30 iunie 2017 в 3:40

Mai mult

Puteți evita adăugarea de marcaj suplimentar. Aceasta funcționează peste tot, cu excepția IE pentru Desktop (dar funcționează în IE pentru Windows Phone și Microsoft Edge) prin stabilirea CSS aspectul:

input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* Styling checkbox */
  width: 16px;
  height: 16px;
  background-color: red;
}

input[type="checkbox"]:checked {
  background-color: green;
}

<input type="checkbox" />

18

0

cobberboy

2 iulie 2014 в 7:02

Mai mult

Eu prefer să folosesc fonturi icon (cum ar fi FontAwesome), deoarece's ușor de a modifica culorile lor cu CSS, și-au scară foarte bine pe mare de pixeli-densitate dispozitive. Deci, aici's un alt pure CSS variantă, folosind tehnici similare cu cele de mai sus.

(Mai jos este o imagine statică, astfel încât să puteți vizualiza rezultatul; a se vedea pe JSFiddle pentru o versiune interactivă.)

Selectare exemplu

Ca și cu alte soluții, se folosește "etichetă" element. Un adiacent span deține nostru de selectare caracter.

span.bigcheck-target {
  font-family: FontAwesome; /* Use an icon font for the checkbox */
}

input[type='checkbox'].bigcheck {
  position: relative;
  left: -999em; /* Hide the real checkbox */
}

input[type='checkbox'].bigcheck + span.bigcheck-target:after {
  content: "\f096"; /* In fontawesome, is an open square (fa-square-o) */
}

input[type='checkbox'].bigcheck:checked + span.bigcheck-target:after {
  content: "\f046"; /* fontawesome checked box (fa-check-square-o) */
}

/* ==== Optional - colors and padding to make it look nice === */
body {
  background-color: #2C3E50;
  color: #D35400;
  font-family: sans-serif;
  font-weight: 500;
  font-size: 4em; /* Set this to whatever size you want */
}

span.bigcheck {
  display: block;
  padding: 0.5em;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<span class="bigcheck">
  <label class="bigcheck">
    Cheese
    <input type="checkbox" class="bigcheck" name="cheese" value="yes" />
    <span class="bigcheck-target"></span>
  </label>
</span>

Aici's JSFiddle pentru asta.

16

0

Joost

3 decembrie 2015 в 8:24

Mai mult

Recent am găsit o soluție destul de interesant la această problemă.

Ai putea folosi aspect: nici unul;` pentru a dezactiva caseta de selectare's, default stil și apoi scrie propriile peste ea așa cum a fost descris de aici (Exemplul 4).

Exemplu vioara

input[type=checkbox] {
  width: 23px;
  height: 23px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
  background-color: #878787;
  outline: 0;
  border: 0;
  display: inline-block;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:focus {
  outline: none;
  border: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}

input[type=checkbox]:checked {
  background-color: green;
  text-align: center;
  line-height: 15px;
}

<input type="checkbox">

Din păcate sprijin browser-ul este destul de rău pentru aspectul opțiune. De mea personală testare am primit doar Opera si Chrome funcționează corect. Dar asta ar fi calea de a merge să-l păstrați simplu, atunci când un suport mai bun vine sau doriți doar să utilizați Chrome/Opera.

"Pot folosi?" link

12

0

agirault

19 aprilie 2018 в 6:35

Mai mult

Soluția mea

input[type="checkbox"] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: 0;
  background: lightgray;
  height: 16px;
  width: 16px;
  border: 1px solid white;
}

input[type="checkbox"]:checked {
  background: #2aa1c0;
}

input[type="checkbox"]:hover {
  filter: brightness(90%);
}

input[type="checkbox"]:disabled {
  background: #e6e6e6;
  opacity: 0.6;
  pointer-events: none;
}

input[type="checkbox"]:after {
  content: '';
  position: relative;
  left: 40%;
  top: 20%;
  width: 15%;
  height: 40%;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  display: none;
}

input[type="checkbox"]:checked:after {
  display: block;
}

input[type="checkbox"]:disabled:after {
  border-color: #7b7b7b;
}

<input type="checkbox"><br>
<input type="checkbox" checked><br>
<input type="checkbox" disabled><br>
<input type="checkbox" disabled checked><br>

8

0

aWebDeveloper

1 septembrie 2014 в 11:38

Mai mult

Aici este un simplu CSS soluție fără nici jQuery sau cod JavaScript.

Eu sunt, folosind FontAwseome icoane, dar puteți folosi orice imagine

input[type=checkbox] {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  visibility: hidden;
  font-size: 14px;
}

input[type=checkbox]:before {
  content: @fa-var-square-o;
  visibility: visible;
  /*font-size: 12px;*/
}

input[type=checkbox]:checked:before {
  content: @fa-var-check-square-o;
}

6

0

Mahfuzur Rahman

15 mai 2018 в 6:20

Mai mult

De pe google, acest lucru este cel mai simplu mod de selectare de styling. Doar adaugă:după "și": verificat:după` CSS bazat pe design-ul.

body{
  background: #DDD;
}
span{
  margin-left: 30px;
}
input[type=checkbox] {
    cursor: pointer;
    font-size: 17px;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.5);
}

input[type=checkbox]:after {
    content: " ";
    background-color: #fff;
    display: inline-block;
    color: #00BFF0;
    width: 14px;
    height: 19px;
    visibility: visible;
    border: 1px solid #FFF;
    padding: 0 3px;
    margin: 2px 0;
    border-radius: 8px;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16);
}

input[type=checkbox]:checked:after {
    content: "\2714";
    display: unset;
    font-weight: bold;
}

<input type="checkbox"> <span>Select Text</span>

Peter Mortensen

Răspuns editat 17 iulie 2019 в 10:44

6

0

Volomike

2 iunie 2019 в 2:13

Mai mult

Cu CSS pur, nimic fancy cu :înainte și după, nu se transformă, puteți dezactiva implicit aspectul și de atunci stilul cu o linie imaginea de fundal ca următorul exemplu. Acest lucru funcționează în Chrome, Firefox, Safari, și acum C (Crom Margine).

INPUT[type=checkbox]:focus
{
    outline: 1px solid rgba(0, 0, 0, 0.2);
}

INPUT[type=checkbox]
{
    background-color: #DDD;
    border-radius: 2px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 17px;
    height: 17px;
    cursor: pointer;
    position: relative;
    top: 5px;
}

INPUT[type=checkbox]:checked
{
    background-color: #409fd6;
    background: #409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

<form>
  <label><input type="checkbox">I Agree To Terms & Conditions</label>
</form>

Peter Mortensen

Răspuns editat 17 iulie 2019 в 10:46

6

0

BEJGAM SHIVA PRASAD

16 decembrie 2016 в 10:13

Mai mult

Modifica selectare stil cu simplu CSS3, don't este necesar nici JS&HTML manipulare.

.form input[type="checkbox"]:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  content: "\f096";
  opacity: 1 !important;
  margin-top: -25px;
  appearance: none;
  background: #fff;
}

.form input[type="checkbox"]:checked:before {
  content: "\f046";
}

.form input[type="checkbox"] {
  font-size: 22px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

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

BEJGAM SHIVA PRASAD

Răspuns editat 18 iulie 2019 в 8:58

5

0

javad shariaty

16 august 2017 в 8:27

Mai mult

Un simplu și ușor șablon precum:

input[type=checkbox] {
  cursor: pointer;
}

input[type=checkbox]:checked:before {
  content: "\2713";
  background: #fffed5;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

input[type=checkbox]:before {
  content: "\202A";
  background: #ffffff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
  font-size: 20px;
  text-align: center;
  line-height: 8px;
  display: inline-block;
  width: 13px;
  height: 15px;
  color: #00904f;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
  margin: -3px -3px;
  text-indent: 1px;
}

<input type="checkbox" checked="checked">checked1<br>
<input type="checkbox">unchecked2<br>
<input type="checkbox" checked="checked" id="id1">
<label for="id1">checked2+label</label><br>
<label for="id2">unchecked2+label+rtl</label>
<input type="checkbox" id="id2">
<br>

4

0

Jonathan Hodgson

24 noiembrie 2012 в 7:28

Mai mult

Cred că cel mai simplu mod de a face asta este de styling o "etichetă" și de a face checkbox invizibil.

HTML

<input type="checkbox" id="first" />
<label for="first"> </label>

CSS

checkbox {
  display: none;
}

checkbox + label {
  /* Style for checkbox normal */
  width: 16px;
  height: 16px;
}

checkbox::checked + label,
label.checked {
  /* Style for checkbox checked */
}

La caseta, chiar dacă este ascuns, va fi în continuare accesibile, iar valoarea acestuia va fi trimis atunci când un formular este prezentat. Pentru browserele vechi, s-ar putea avea de a schimba clasa de "etichetă" a verificat folosind JavaScript pentru că eu nu't cred că versiunile vechi de Internet Explorer înțelege::verificatpevalidare`.

4

0

Braden Best

24 septembrie 2013 в 11:16

Mai mult

Vai! Toate aceste soluții m-au condus la concluzia că HTML selectare cam nasol dacă doriți să-l stil.

Ca o avertizare, nu't un CSS de implementare. M-am gândit'd partaja soluție am venit cu în cazul în care cineva s-ar putea găsi că este util.

Am folosit HTML5 "panza" element.

Avantajul la acest lucru este că don't trebuie să utilizați imagini externe și putea salva ceva de lățime de bandă.

Dezavantajul este că, dacă un browser pentru unii motiv, poate't face corect, atunci nu's nici o rezervă. Totuși, dacă acest lucru rămâne o problemă în 2017 este discutabil.

Actualizare

Am găsit vechiul cod destul de urât, așa că am decis să-i dea o rescrie.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offset){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offset, offset,
                this.width - offset * 2, this.height - offset * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0);
        this.draw_rect("#FFFFFF", 1);

        if(this.is_checked())
            this.draw_rect("#000000", 2);
    },

    is_checked: function(){
        return !!this.state;
    }
});

Aici's a demo de lucru.

Noua versiune foloseste prototipuri și diferențial moștenire pentru a crea un sistem eficient pentru crearea de casete de selectare. Pentru a crea o casetă de selectare:

var my_checkbox = Checkbox.create();

Acest lucru va adauga imediat de selectare a DOM și cârlig până la evenimente. Pentru a interoga dacă o casetă de selectare este bifată:

my_checkbox.is_checked(); // True if checked, else false

De asemenea, important de reținut este că am scăpat de buclă.

Update 2

Ceva am uitat să menționez în ultima actualizare este că, folosind panza are mai multe avantaje decât a face doar o casetă de selectare care arată totuși doriți să arate. Ai putea crea, de asemenea, multi-stat casetele de selectare, dacă ai vrut să.

Object.prototype.create = function(args){
    var retobj = Object.create(this);

    retobj.constructor(args || null);

    return retobj;
}

Object.prototype.extend = function(newobj){
    var oldobj = Object.create(this);

    for(prop in newobj)
        oldobj[prop] = newobj[prop];

    return Object.seal(oldobj);
}

var Checkbox = Object.seal({
    width: 0,
    height: 0,
    state: 0,
    document: null,
    parent: null,
    canvas: null,
    ctx: null,

    /*
     * args:
     * name      default             desc.
     *
     * width     15                  width
     * height    15                  height
     * document  window.document     explicit document reference
     * target    this.document.body  target element to insert checkbox into
     */
    constructor: function(args){
        if(args === null)
            args = {};

        this.width = args.width || 15;
        this.height = args.height || 15;
        this.document = args.document || window.document;
        this.parent = args.target || this.document.body;
        this.canvas = this.document.createElement("canvas");
        this.ctx = this.canvas.getContext('2d');

        this.canvas.width = this.width;
        this.canvas.height = this.height;
        this.canvas.addEventListener("click", this.ev_click(this), false);
        this.parent.appendChild(this.canvas);
        this.draw();
    },

    ev_click: function(self){
        return function(unused){
            self.state = !self.state;
            self.draw();
        }
    },

    draw_rect: function(color, offsetx, offsety){
        this.ctx.fillStyle = color;
        this.ctx.fillRect(offsetx, offsety,
                this.width - offsetx * 2, this.height - offsety * 2);
    },

    draw: function(){
        this.draw_rect("#CCCCCC", 0, 0);
        this.draw_rect("#FFFFFF", 1, 1);
        this.draw_state();
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);
    },

    is_checked: function(){
        return this.state == 1;
    }
});

var Checkbox3 = Checkbox.extend({
    ev_click: function(self){
        return function(unused){
            self.state = (self.state + 1) % 3;
            self.draw();
        }
    },

    draw_state: function(){
        if(this.is_checked())
            this.draw_rect("#000000", 2, 2);

        if(this.is_partial())
            this.draw_rect("#000000", 2, (this.height - 2) / 2);
    },

    is_partial: function(){
        return this.state == 2;
    }
});

Am modificat ușor Checkbox folosit în ultimul fragment, astfel că este mai generic, făcând posibilă pentru a "se extind" cu o casetă de selectare care are 3 membre. Aici's demo. După cum puteți vedea, ea are deja mai multe funcționalități decât built-in caseta.

Ceva să ia în considerare atunci când te're alegerea între JavaScript și CSS.

Vechi, prost conceput cod

Demo De Lucru

În primul rând, înființat o panza

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d'),
    checked = 0; // The state of the checkbox
canvas.width = canvas.height = 15; // Set the width and height of the canvas
document.body.appendChild(canvas);
document.body.appendChild(document.createTextNode(' Togglable Option'));

Apoi, să elaboreze o modalitate de a avea panza de actualizare de sine.

(function loop(){
  // Draws a border
  ctx.fillStyle = '#ccc';
  ctx.fillRect(0,0,15,15);
  ctx.fillStyle = '#fff';
  ctx.fillRect(1, 1, 13, 13);
  // Fills in canvas if checked
  if(checked){
    ctx.fillStyle = '#000';
    ctx.fillRect(2, 2, 11, 11);
  }
  setTimeout(loop, 1000/10); // Refresh 10 times per second
})();

Ultima parte este de a face mai interactiv. Din fericire, l's destul de simplu:

canvas.onclick = function(){
  checked = !checked;
}

Acest lucru este în cazul în care ai putea avea probleme în IE, din cauza lor eveniment ciudat model de manipulare în JavaScript.

Sper că acest lucru ajută pe cineva, cu siguranta adaptate nevoilor mele.

Braden Best

Răspuns editat 18 iulie 2019 в 2:26

4

0

Cherish

6 aprilie 2016 в 10:46

Mai mult

Nu JavaScript sau jQuery necesare.

Schimba caseta stil simplu mod.

HTML

<input type="checkbox" id="option" />
<label for="option"> <span></span> Click me </label>

CSS

input[type="checkbox"] {
  display: none;
  border: none !important;
  box-shadow: none !important;
}

input[type="checkbox"] + label span {
  background: url(http://imgh.us/uncheck.png);
  width: 49px;
  height: 49px;
  display: inline-block;
  vertical-align: middle;
}

input[type="checkbox"]:checked + label span {
  background: url(http://imgh.us/check_2.png);
  width: 49px;
  height: 49px;
  vertical-align: middle;
}

Aici este JsFiddle link-ul:

3

0

Ali Gonabadi

21 iulie 2015 в 1:40

Mai mult

Acest lucru este mai simplu mod și puteți alege care casetele de selectare pentru a da acest stil.

CSS:

.check-box input {
  display: none;
}

.check-box span:before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url("unchecked.png");
}

.check-box input:checked + span:before {
  background: url("checked.png");
}

HTML:

<label class="check-box">
  <input type="checkbox">
  <span>Check box Text</span>
</label>

2

0

Adăugati o întrebare

Categorii

Toate

Tehnologii

Cultură

Viață / Artă

Stiință

Profesii

Afaceri

Utilizatori

Toate

Nou

Populare

1

Александр Македонский

Înregistrat 6 zile în urmă

2

Andrei Kalinin

Înregistrat 3 săptămâni în urmă

3

Koroleva Ego

Înregistrat 1 lună în urmă

4

Star Lenon

Înregistrat 1 lună în urmă

5

Данил Жевнеров

Înregistrat 2 luni în urmă

Aveți o întrebare? Adăugați-o pe site-ul nostru și primiți răspuns instant

ro.kzen.dev

Jacob Mattison · Accepted Answer · 2010-11-10T20:02:27+00:00

UPDATE:

Mai jos răspunsul referințe starea de lucruri înainte de disponibilitatea pe scară largă de CSS 3. În browserele moderne (inclusiv Internet Explorer 9 și mai târziu) este mai simplu de a crea caseta de înlocuiri cu dumneavoastră preferat de styling, fără a utiliza JavaScript.

Aici sunt cateva link-uri utile:

Este de remarcat faptul că problema fundamentală nu s-a schimbat. Tu încă mai pot't se aplică stiluri (frontiere, etc.) direct de selectare element și au aceste stiluri afectează afișarea HTML selectare. Ce s-a schimbat, însă, este faptul că-l's acum posibil pentru a ascunde reale de selectare și înlocuiți-l cu un stil element de propria dvs., folosind doar CSS. În special, pentru că CSS are acum un larg acceptată `:verificat selector, puteți face înlocuirea a reflecta în mod corect a verificat starea de cutie.

ÎN VÂRSTĂ DE RĂSPUNS

Aici's un articol util despre styling casetele de selectare. Practic, acel scriitor a constatat că acesta variază foarte mult de la browser la browser-ul, și că multe browsere afișează întotdeauna implicit de selectare indiferent cum ai stil. Așa că nu prea't-un mod simplu.

L'nu e greu de imaginat o soluție în cazul în care ar folosi JavaScript pentru a suprapune o imagine pe caseta de selectare și au clicuri pe care imaginea cauza reală de selectare pentru a fi verificate. Utilizatorii fără JavaScript-ar vedea caseta implicit.

Editat pentru a adăuga: aici's un scenariu frumos, care face acest lucru pentru tine; se ascunde real de selectare element, îl înlocuiește cu un stil span, și redirecționează faceți clic pe evenimente.

Cum să stil o casetă de selectare folosind CSS

Înainte de a începe (Jan 2015)

Soluția (în principiu)

Soluția (în cod)

Rafinament (folosind icoane)

Nu-l ascunde, folosind visibility: hidden " sau " display: none

Demo de Vioară

Simplu de implementat și ușor de personalizat soluție

Soluția mea

Actualizare

Update 2

Vechi, prost conceput cod

HTML

CSS

Nu-l ascunde, folosind `visibility: hidden " sau " display: none`