CSS3 Select Option Tasarımı Değiştirme
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 Select Option Tasarımı Değiştirme

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(2367)
RAPOR ET
Bu dersimizde css ile nasıl select-option tasarımı yaparız onu işliyeceğiz.Hemen örneğe geçelim.

İndir : http://ustaderslik.com/dosya/select-option-tasarım.rar

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style type="text/css">
select {width:150px;height:35px;padding:5px;margin: 0;background:#c63d0f;color:#fdf3e7;border:none;outline:none;font:'Open Sans', sans-serif 14px;display: inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;}
option{background:#3b3738}

label {position:relative}
label span{height:25px;width:20px;padding-left:5px; padding-top:10px; color:#fdf3e7; position:absolute;right:0px; top:-7px;pointer-events:none;}
label:hover span{background:#3b3738;}
</style>
</head>
<body>

<label>
<select>
<option selected>Değer-1</option>
<option>Değer-2</option>
<option>Değer-3</option>
<option>Değer-4</option>
<option>Değer-5</option>
</select>
<span> ▼ </span>
</label>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/8ghr45f5g4.png
Tasarım bu şekilde.Öncelikle selecti label içine aldık.Sonra selecte sıfırlamak yaptık.Burada en önemli sıfırlama appearance ile oku yok ettik.Daha sonra kendimizn oluşturduğu bir oku label içine attık.Burada önemli olan nokta ise pointer-events ile oku işlevsiz kıldık bu şekilde görünür ama arkasındaki objeye tıkladığımızda ,arka objenin işlev devam eder.

Temel mantık bu şekilde.Önemli dediğim noktaları uygulayarak select option tasarımlarını değiştirebilirsiniz.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol