< ClearExperience >

Редакция:	27.04.2021
Теги:	CSS

Стилизация radio/checkbox

HTML

1

2

3

4

<label>

<input type="checkbox" name="">

<div>Text</div>

</label>

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

label input[type="radio"],

label input[type="checkbox"] {

display: none;

}

label input[type="radio"] + div,

label input[type="checkbox"] + div {

cursor: pointer;

position: relative;

display: block;

padding: 0 0 0 30px;

}

label input[type="radio"] + div::before,

label input[type="radio"] + div::after,

label input[type="checkbox"] + div::before,

label input[type="checkbox"] + div::after {

content: '';

display: block;

position: absolute;

box-sizing: border-box;

}

label input[type="radio"] + div::before,

label input[type="radio"] + div::after {

border-radius: 50%;

}

label input[type="radio"] + div::before,

label input[type="checkbox"] + div::before {

top: 0;

left: 0;

width: 16px;

height: 16px;

border: 1px solid #000;

}

label input[type="radio"] + div::after,

label input[type="checkbox"] + div::after {

opacity: 0;

top: 3px;

left: 3px;

width: 10px;

height: 10px;

background: #000;

transition: all 200ms linear;

}

label input[type="radio"]:checked + div::after,

label input[type="checkbox"]:checked + div::after {

opacity: 1;

}