CSS

CSS İle Özelleştirilebilir Select Menü

Bu yazı 3 ay veya daha önce yayınlanmış olduğundan görülen linklerde, resimlerde veya kodlarda hata olabilir. Herhangi bir hata ile karşılaşırsanız bana buradan bildirebilirsiniz. Anlayışınız için teşekkür eder, keyifli okumalar dilerim.

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

11 comments
  1. yLMz

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

  2. Emrah avcı

    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.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

PREMIUM WORDPRESS TEMALARI
wordpress emlak teması
wordpress rent a car teması v2
%d blogcu bunu beğendi: