Anasayfa / CSS İle Özelleştirilebilir Select Menü

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

WordPress Emlak Teması

11 yorum

  1. kodlama için tşkler ama ie sorunu var.
    ie’den girince resim altta kalıyor ve ok işareti yine çıkıyor.

  2. faydalı paylaşım için teşekkrüler. başarınızın devamını dilerim

  3. Css ile sitelerimize bu denli ufak parçacık kodlamalar güzel şeyler çıkarabiliriz. Sizin anlatımınızla da bu uygulama çok basit bir şekile indirilmiş. Yeni başlangıç ta olan arkadaşlarımıza da bu uygulamanın faydası olacaktır. Tabikide arkadaşlar bu uygulamayı kendilere göre değiştirip daha da geniş bir uygulama haline getirebilirler. Bizzat kendminde uygulayacağı basit bir css uygulaması olmuş. Konu için teşekkürler.

  4. Harika bi anlatım olmuş klavyene sağlık.

  5. Süper 😀

  6. Mert Köseoğlu

    Helal olsun, en sağlam paylasımlar senin blogta.

  7. Volkan Akpınar

    Çok güzel bir anlatım olmuş gerçekten teşekkürler.

Cevapla

E-posta adresiniz yayınlanmayacak. Gerekli alanlar işaretlenmelidir *

*

x

İlginizi Çekebilir

PayPal.Me İle Ödeme Alın

Paypal’ın çıkarmış olduğu PayPal.Me ile artık direk olarak kullanıcı profilinizden ödeme alabilirsiniz.PayPal.Me ...