Cara membuat ceklis di html

Pada kesempatan kali ini kita akan belajar Cara Membuat Check List Menggunakan HTML CSS. Dalam tampilan Check List nanti kita akan membuat menggunakan input type checkbox. Tentunya saat kita membuat sebuah check list akan bisa memilih lebih dari satu list. Jadi bagaimana cara membuatnya mari simak dalam langkah-langkah dibawah ini:

Langkah Pertama

Sahabat buat file html kemudian ketikkan code seperti dibawah ini:

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

<div class="wrap">

<h1>Silahkan Check List</h1>

<label>

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

<i></i>

<span>Web Design</span>

</label>

<label>

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

<i></i>

<span>Web Programming</span>

</label>

<label>

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

<i></i>

<span>Mobile Apps</span>

</label>

<label>

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

<i></i>

<span>Digital Marketing</span>

</label>

<label>

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

<i></i>

<span>Design Graphic</span>

</label>

</div>

saya dsiini hanya memberikan contoh beberapa list data yang digunakan.

Langkah Kedua

Setelah struktur html sudah dibuat selanjutnya berikan style CSS untuk mempercantik tampilannya, silahkan ikutin code berikut ini:

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

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

<style>

*{

margin:0;

padding: 0;

box-sizing: border-box;

}

body{

justify-content: center;

align-items: center;

min-height: 100vh;

display: flex;

}

.wrap{

padding: 30px 75px 10px 30px;

position: relative;

background: #4bdbb9;

}

.wrap h1{

color:#ce700b;

font-size: 30px;

padding: 10px 0;

margin-left: 10px;

display: inline-block;

border-bottom: 4px solid #ffffff;

}

.wrap label{

position: relative;

display: block;

margin: 40px 0;

color:#ffffff;

font-size: 24px;

cursor: pointer;

}

.wrap input[type="checkbox"]

{

-webkit-appearance:none;

}

.wrap i{

position: absolute;

top:3px;

display: inline-block;

width: 20px;

height: 20px;

border-radius: 50%;

border: 3px solid #ffffff;

}

.wrap input[type="checkbox"]:checked ~ i

{

top:1px;

border-top: none;

border-right: none;

height: 15px;

width: 25px;

transform: rotate(-45deg);

}

.wrap span{

position: relative;

left: 40px;

transition: 0.5s;

}

.wrap span:before{

content: '';

position: absolute;

top:50%;

left: 0;

width: 100%;

height: 2px;

background: #ffffff;

transform: translateY(-50%) scaleX(0);

transform-origin: right;

transition: transform 0.5s;

}

.wrap input[type="checkbox"]:checked ~ span:before

{

transform: translateY(-50%) scaleX(1);

transform-origin: left;

transition: transform 0.5s;

}

.wrap input[type="checkbox"]:checked ~ span

{

color:#157efe;

}

</style>

pada code style CSS diatas saya menggunakan property transform untuk memberikan sedikit efek animasi agar saat di check list semakin menarik tampilannya seperti tampilan dibawah ini:

Demikian pembahasan yang bisa saya sampaikan tentang Cara Membuat Check List Menggunakan HTML CSS. Selamat mencoba dan semoga bermanfaat.

Apakah tag HTML untuk membuat checkbox?

Tag HTML manakah yang benar untuk membuat sebuah kotak centang?

Apa itu checkbox HTML?

HTML apa yang benar untuk membuat kolom input teks?