Как в html увеличить размер checkbox?
1 ответ
от
brook ,
7 месяцев назад
@cloyd
Для увеличения размера checkbox в HTML можно использовать CSS свойства width и height. Вот несколько способов:
- Используйте CSS класс и задайте размеры с помощью свойств width и height:
1 2 3 4 5 6 7 8 |
<style>
.larger-checkbox {
width: 20px;
height: 20px;
}
</style>
<input type="checkbox" class="larger-checkbox">
|
- Задайте размеры прямо в атрибуте style:
1
|
<input type="checkbox" style="width: 20px; height: 20px;"> |
- Используйте CSS псевдоэлемент ::after для создания собственного элемента отметки и установки его размера:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<style>
.custom-checkbox {
width: 20px;
height: 20px;
}
.custom-checkbox::after {
content: "";
width: 100%;
height: 100%;
display: block;
background-color: #000;
border-radius: 50%;
}
</style>
<label>
<input type="checkbox" class="custom-checkbox">
</label>
|
Обратите внимание, что последний способ создает собственную отметку checkbox с помощью CSS, поэтому он имеет более гибкую кастомизацию.
15