Html Kare Şeklinde Radio Button Ekleme

HTML’de Kare Şeklinde Radyo Düğmeleri Ekleme

Radyo düğmeleri, bir grup seçenekten yalnızca birini seçmenize olanak tanıyan HTML form öğeleridir. Varsayılan olarak, radyo düğmeleri daireseldir, ancak kare şeklinde de olabilirler. Bu makale, HTML’de kare şeklinde radyo düğmeleri eklemeyi adım adım açıklayacaktır.

Adım 1: HTML Belgesi Oluşturma

İlk olarak, yeni bir HTML belgesi oluşturun ve aşağıdaki kodu ekleyin:

“`html




Kare Radyo Düğmeleri

Kare Radyo Düğmeleri

Kırmızı
Yeşil
Mavi


“`

Adım 2: CSS Ekleme

Radyo düğmelerini kare yapmak için CSS kullanmanız gerekir. Aşağıdaki CSS kodunu HTML belgenizin <head> bölümüne ekleyin:

“`css
input[type=”radio”] {
appearance: none;
width: 20px;
height: 20px;
border: 1px solid #000;
border-radius: 0;
background-color: #fff;
}

input[type=”radio”]:checked {
background-color: #000;
}
“`

Adım 3: Radyo Düğmelerini Kare Yapma

CSS kodunu ekledikten sonra, radyo düğmeleri kare şeklinde olacaktır. Ancak, hala dairesel bir arka planları olacaktır. Bunu düzeltmek için aşağıdaki CSS kodunu ekleyin:

css
input[type="radio"]::-webkit-inner-circle {
border-radius: 0;
}

Adım 4: Radyo Düğmelerini Hizalama

Radyo düğmelerini yatay olarak hizalamak için aşağıdaki CSS kodunu ekleyin:

css
input[type="radio"] {
display: inline-block;
margin-right: 10px;
}

İlgili Kaynaklar

Sonuç

Bu adımları izleyerek, HTML’de kare şeklinde radyo düğmeleri kolayca oluşturabilirsiniz. Bu, formlarınıza daha modern ve çekici bir görünüm kazandırmanıza yardımcı olabilir.

Yayımlandı

kategorisi