<script>
let div = document.createElement('div'); //Создали элемент с тегом div
div.className = "alert"; //Дали ему класс alert
div.innerHTML = "<strong>Всем привет!</strong> Вы прочитали важное сообщение.";
//Добавили в него контент
document.body.append(div); //Вставили элемент в структуру
</script>
/* Общий стиль для переключателя */
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
/* Скрываем стандартный чекбокс */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* Стилизуем ползунок */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: 0.4s;
border-radius: 34px; /* Скругляем края */
}
/* Круг внутри переключателя */
.slider:before {
position: absolute;
content: "";
height: 20px;
width: 20px;
left: 2px;
bottom: 2px;
background-color: white;
transition: 0.4s;
border-radius: 50%;
}
/* Изменяем цвет, когда чекбокс активен */
input:checked + .slider {
background-color: #4caf50;
}
/* Перемещаем круг при активном состоянии */
input:checked + .slider:before {
transform: translateX(26px);
}
<style>
.t-checkbox__indicator {
height: unset !important;
width: unset !important;
border: unset !important;
margin-right: unset !important;
}
.t-checkbox__control {
position: relative !important;
display: inline-block !important;
width: 50px !important;
height: 24px !important;
}
.t-checkbox__control .t-checkbox:checked~.t-checkbox__indicator:after {
display: none !important;
}
.t-checkbox__control input {
opacity: 0;
width: 0;
height: 0;
}
.t-checkbox__indicator {
position: absolute !important;
cursor: pointer !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: #ccc !important;
transition: 0.4s !important;
border-radius: 34px !important;
}
.t-checkbox__indicator:before {
position: absolute !important;
content: "" !important;
height: 20px !important;
width: 20px !important;
left: 2px !important;
bottom: 2px !important;
background-color: white !important;
transition: 0.4s !important;
border-radius: 50% !important;
}
input:checked + .t-checkbox__indicator {
background-color: #4caf50 !important;
}
input:checked + .t-checkbox__indicator:before {
transform: translateX(26px) !important;
}
</style>