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..

 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ç: