Şimdi şu şekilde bir HTML yapımızın olduğunu varsayarak anlatmaya çalışacağım açıklamalı bir şekilde bilmeyenler için. Burada type="checkbox" bir input elemanının hangi tipe sahip olduğunu HTML kodunda yorumlar. Gelelim class="checkbox" burada CSS tarafında class'ı yani sınıfı checkbox özelliğine sahip olan bir elemanı ki, burada elemanımız input ama ne class yani sınıfı checkbox. Gelelim id="check" bu özellikle aslında hem JavaScript tarafında kontroller sağlayabiliriz hem de mesela aşağıda görmüş olduğunuz üzere label diye de bir etiket bulunmakta ki, bu etiket aslında bizim içerisine metin alanı girebileceğimiz ve bunu düzgün bir şekilde genellikle checkbox ve radio tipine sahip input elemanlarının karşısında kullanırız. Yapıyı aşağıdaki kodda görebilirsiniz. Form-group div classına gelecek olursak aslında onu bir divin içerisine rastgele aldık çok önemli de değil ama şimdilik bir anlam ifade etmiyor açıkçası.
<div class="form-group">
<input type="checkbox" class="checkbox" id="check">
<label for="check">Kuralları okudum ve kabul ediyorum</label>
</div>İşte kod:.checkbox {
appearance: none; /* Görünümü gizleyelim */
}
.checkbox ~ label {
display: flex;
align-items: center;
color: #555;
font-family: 'Comfortaa', cursive;
font-size: 12px;
cursor: pointer;
}
.checkbox ~ label::before {
content: '';
width: 1.4rem;
height: 1.4rem;
border: 1px solid #48292f;
border-radius: 4px;
display: inline-block;
margin-right: 12px;
}
.checkbox:checked + label::before {
content: '\2713'; /* Checkmark symbol olarak geçiyor şu kod \2713 Google'dan bulabilirsiniz */
color: #555;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
}Şimdi fazla detaya girmeyeceğim ama label::before kodu tam olarak şu koddan öncekileri elemana şunları uygulama gibi düşünebilirsiniz ve ayrıca appearance: none; yerine opacity: 0; da kullanılabilir ama bunu göstermek için daha sonra opacity: 1; yapmamız gerekiyor ki, aslında appearance adı üstünde görünüm demek ve CSS de zaten Bize bunu sunuyor. Content ise içerik anlamında yani buraya biz checkmark sembolunun kodunu verip içerisinde göstermesini sağlıyoruz kodumuzun.Demo: https://codepen.io/cavadovrufiq/pen/NWEKbLv