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.

Birinci Seçenekİkinci Seçenek

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

Sevgiler.
Bir önceki yazımız olan Wordpress Tema Lisanslama başlıklı makalemizi de okumanızı öneririz.