
11 Haziran 2015
minimalcoding
4374
0
Css ile özel Select Box Yapımı
Herkes bilir ki tarayıcıların yorumlamış olduğu select elementlerinin görünümü son derece kötüdür. Her ne kadar bu yapıyı düzeltmek için javascript eklentileri kullanılsada işin back-end kısmında bazen sorunlar çıkabilir , bu yüzden select elementini native kullanmak daha yerinde olacaktır. Şimdi CSS ile Select elementinin nasıl stillendirileceğine göz atalım.
Html Kod Yapımız
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<form class="example"> <label class="select-box"> <select> <option>Alabama</option> <option>Arizona</option> <option>California</option> </select> </label> </form> |
CSS Kod Yapımız
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
form.example label.select-box { background-color: #00cf9b; width: 100%; float: left; border: 1px solid; padding-top: 0; text-align: left; height: 55px; display: block; font-weight: 400; position: relative; border-radius: 2px; } form.example select { background-color: #00cf9b; border-radius: 0px; background-image: url(img/icon.png); background-position: top 20px right 10px; background-repeat: no-repeat; display: block; height: 54px; width: 100%; cursor: pointer; margin-bottom: 15px; padding-left: 10px; outline: none; letter-spacing: 1px; border: none; -webkit-appearance: none; -moz-appearance: none; line-height: 54px; color: #fff; font-size: 16px; } |
Örnek
See the Pen JdJpeY by MinimalCoding (@MinimalCoding) on CodePen.
Minimal Coding Privacy Policy
Sitemizi ziyaret eden kullanıcılar aşağıdaki koşulları, yazılanlarla sınırlı olmamak şartıyla kabul etmiş sayılacaktır. “www.minimalcoding.net” sitesinde yer alan tüm bilgiler,tasarım,logo,yorum ve tavsiyeler ile ses, görüntü, yazı içeren bilgi ve belgeler (“İçerik”) ile buradan yapılan tüm linkler, kullanıcıya genel bilgi vermek amacıyla sunulmuştur.
Burada mevcut olan İçerik, Minimal Coding'i Kaynak göstermeden paylaşılamaz ve yayınlanamaz. Bu siteye erişim serbest ve anonimdir.