Πώς να στιλιζάρετε τα κουτάκια επιλογής με CSS χωρίς…

Για να στιλιζάρετε ένα πλαίσιο ελέγχου χωρίς βιβλιοθήκες, μπορείτε να χρησιμοποιήσετε έναν συνδυασμό από το να κρύψετε το προεπιλεγμένο στοιχείο και να στιλιζάρετε τα ψευδο-στοιχεία ::before ή ::after που σχετίζονται με το γονικό <label>.

Κρύψιμο του προεπιλεγμένου πλαισίου ελέγχου:

input[type="checkbox"] {
  display: none; /* ή visibility: hidden; height: 0; width: 0; */
}

Δημιουργία ενός στιλιζαρισμένου "τετραγώνου" χρησιμοποιώντας το ψευδο-στοιχείο <label>:

input[type="checkbox"] + label::before {
  content: ''; /* Απαραίτητο για την εμφάνιση του ψευδο-στοιχείου */
  display: inline-block;
  width: 1em; /* Μέγεθος του τετραγώνου */
  height: 1em; /* Μέγεθος του τετραγώνου */
  border: 1px solid #ccc; /* Περιγράμματα του τετραγώνου */
  margin-right: 0.5em; /* Απόσταση από το κείμενο */
  vertical-align: middle; /* Κάθετη ευθυγράμμιση */
  /* Άλλες προαιρετικές στυλ: background-color, border-radius, box-shadow */
}

Στυλ για την επιλεγμένη κατάσταση:

Χρησιμοποιούμε τον επιλογέα checked για το input και αλλάζουμε τα στυλ του ψευδο-στοιχείου label ανάλογα.

input[type="checkbox"]:checked + label::before {
  background-color: #007bff; /* Χρώμα φόντου όταν είναι επιλεγμένο */
  border-color: #007bff; /* Χρώμα περιγράμματος όταν είναι επιλεγμένο */
  /* Άλλα προαιρετικά στυλ */
}

Προσθήκη "τικετού" (ή άλλου δείκτη):

Μπορείτε να χρησιμοποιήσετε ένα δεύτερο ψευδο-στοιχείο (::after) ή να στιλιζάρετε το υπάρχον ::before με background-image (svg, data-url) ή στυλ περιγράμματος.

Παράδειγμα με border για δημιουργία τσεκ-μάρκας:

input[type="checkbox"]:checked + label::after {
  content: '';
  display: inline-block;
  width: 0.4em; /* Πλάτος γραμμής τσεκ-μάρκας */
  height: 0.7em; /* Ύψος γραμμής τσεκ-μάρκας */
  border-right: 2px solid white; /* Δεξιά πλευρά τσεκ-μάρκας */
  border-bottom: 2px solid white; /* Κάτω μέρος τσεκ-μάρκας */
  transform: rotate(45deg); /* Περιστροφή για σχηματισμό τσεκ-μάρκας */
  position: absolute; /* Για τοποθέτηση μέσα στο ::before */
  top: 0.1em; /* Ρύθμιση θέσης */
  left: 0.3em; /* Ρύθμιση θέσης */
  /* Το γονικό label::before μπορεί να χρειάζεται position: relative; */
}

Για να λειτουργήσει σωστά το τελευταίο παράδειγμα, προσθέστε position: relative; στο input[type="checkbox"] + label::before:

input[type="checkbox"] + label::before {
  /* ... προηγούμενα στυλ ... */
  position: relative; /* Προστίθεται για τοποθέτηση του ::after */
}

Αυτή η προσέγγιση παρέχει πλήρη έλεγχο στην εμφάνιση του πλαισίου ελέγχου και καλή προσβασιμότητα, καθώς το προεπιλεγμένο στοιχείο εξακολουθεί να υπάρχει και αντιδρά στις ενέργειες του χρήστη (κλικ, εστίαση). Είναι σημαντικό να συνδέσετε το input με το label χρησιμοποιώντας τα χαρακτηριστικά id και for για σωστή λειτουργία κατά το κλικ στο κείμενο της ετικέτας.

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">Συμφωνώ με τους όρους</label>

Πώς να στιλιζάρετε τα κουτάκια επιλογής με CSS χωρίς να χρησιμοποιήσετε βιβλιοθήκες;