Чтобы создать собственную кнопку-флажок с использованием чистого CSS, вы можете использовать различные методы. Вот несколько примеров:

1. Метод 1. Использование меток и элементов ввода

   <label for="checkbox" class="custom-checkbox">
    <input type="checkbox" id="checkbox">
    <span class="checkmark"></span>
    Check me
   </label>

   «»;
   позиция: абсолютная;
   слева: 4 пикселя;
   сверху: 4 пикселя;
   ширина: 8 пикселей;
   высота: 8 пикселей;
   цвет фона: #000;

2. Метод 2. Использование псевдоэлементов CSS

   <div class="custom-checkbox">
    <input type="checkbox" id="checkbox">
    <label for="checkbox"></label>
    Check me
   </div>

   «»;
   позиция: абсолютная;
   слева: 4 пикселя;
   сверху: 4 пикселя;
   ширина: 8 пикселей;
   высота: 8 пикселей;
   цвет фона: #000 ;

3. Метод 3. Использование пользовательских свойств CSS (переменных)

   <input type="checkbox" id="checkbox" class="custom-checkbox">
   <label for="checkbox">Check me</label>

   «»;
   позиция: абсолютная;
   слева: 0;
   сверху: 0;
   ширина: var(–checkbox-size);
   высота: var(–checkbox- size);
   граница: 1 пиксель сплошная var(–checkbox-border-color);
   }
   .custom-checkbox input[type=”checkbox”] {
   непрозрачность: 0;
   ширина: 0;
   высота: 0;
   }
   .custom-checkbox input[type=”checkbox”]:checked + label::before {
   background-color: var(–checkbox- клетчатый цвет);