JSFiddle - React, Tailwind, and code Playground

by Олег

HTML

<label>
    <input class="checkbox" type="checkbox" name="">
    <span class="checkbox-custom"></span>
    <span class="label">Выбрать</span>
</label>




















































<div class="footer">
Помогу в решении любого вопроса js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку<br>Аккаунт на тостере <a href="https://toster.ru/user/politon">toster.ru/user/politon</a><br><span>E-mail: oleg@w3schools.ru</span><br><span>Skype: politon81</span>
</div>
<!--Любое решение вопросов
E-mail: oleg@w3schools.ru
js, css, html, svg, canvas, animation, php
Модули, комопненты под joomla, wordpress, opencart, modX, drupal, DLE, prestashop
Шрифты! Любые дополнительные символы к стандартным! Локализация к Вашему языку
E-mail: oleg@w3schools.ru
Skype: politon81
-->

CSS

/* Скрываем реальный чекбокс */
.checkbox {
    display: none;
}
 
/* Задаем внешний вид для нашего кастомного чекбокса. Все обязательные свойства прокомментированы, остальные же свойства меняйте по вашему усмотрению */
.checkbox-custom {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid #000;
}
.checkbox-custom,
.label {
    display: inline-block;
    vertical-align: middle;
}
.checkbox:checked + .checkbox-custom::before {
    content: "✔";
    display: block;   
    position: absolute;
    left: 0;
    top: -8px;
    font-size:25px;
    font-weight: bold;
    color:#f00;
}












































/*Это не относится к Вашему коду*/
.footer{
  position:absolute;
  bottom:20px;
  right:20px;
  font-size:0.7em;
  background:#ff0;
}
.footer span{
  color:#f00;
  font-weight:bold;
}