CSS İle Özelleştirilebilir Select Menü

Birçok kişi websitesini tasarlarken herşeyi dört dörtlük yaparken açılır seçme menüsünde(select menu) css ile sorun yaşıyor. Bu yazımda size açılır seçme menünüzün nasıl css ile özelleştireceğinizi anlatacağım.

1. Adım: Select Menü Oluşturalım

Aşağıdaki gibi bir select menü oluşturduğumuzu farz edelim. Menüden hemen sonra kodları veriyorum.

<select>
<option>Birinci Seçenek</option>
<option>İkinci Seçenek</option>
</select>

2.Adım: DIV oluşturup Still Katalım

Yukarıda verdiğim select menüyü bir div içerisine aldım ve class üzerinden şimdi css ile şekillendiricem. Div’in class ismine acilir_menu dedim ben siz ne isterseniz onu yazın. Ben bu isim üzerinden gidicem anlatmaya

<div class="acilir_menu">
<select>
<option>Birinci Seçenek</option>
<option>İkinci Seçenek</option>
</select>
</div>

Aşağıdaki still kodunu css dosyamızda uygun bir yere yapıştırıyoruz.

.acilir_menu select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}

Yukarıdaki Kod ile Neler Yaptık ?

  • Arkaplanı şeffaf yaptık,
  • Genişliğini 268px yaptık,
  • 4 bir yanını 5px genişliğinde dolgu ile doldurduk,
  • Yazı fontunu 16px yaptık,
  • Çerçeveleri kaldırdık,
  • Köşeleri sivri yaptık,
  • Yüksekliği 34px yaptık,
  • Son olarak sağ taraftaki ok işaretini kaldırdık,

Şimdi css ile bulunduğu div üzerinden bunu özelleştirelim..

asagi_ok Yandaki ok simgesini kullanacağım ben siz isterseniz başka bir simge veya resim kullanabilirsiniz.

.acilir_menu {
width: 240px;
height: 34px;
overflow: hidden;
background: url(asagi_ok.jpg) no-repeat right #ddd;
border: 1px solid #ccc;
}

Sonuç:

Merhaba! Ben Burak. 2016 yılında Karadeniz Teknik Üniversitesi Harita Mühendisliği Bölümü’nden mezun oldum. Lise yıllarında HTML & CSS‘e, Üniversite yıllarında WordPress ve Matlab‘e adım attım. Lisans tezimi Matlab üzerinden program yazarak teslim ettim. Çeşitli projeler için WordPress tabanlı yazılımlar geliştirdim.

11 Yorum

Bir Cevap Yazın