CSS ile özel select yapimi

Bu yazıda CSS ile select nesnesinin nasıl özelleştirebileceğimizi öğreneceğiz. CSS ile selectleri özelleştirirken opacity özelliğinden faydalanacağız.

Çoğumuz elimize ulaşan PSD dosyalarında tasarım gereği stillere bürünmüş select boxlar görmekteyiz. Bunu özelleştirirken plugin kullanmaktayız. Bende bu durumdan sıkılıp kalıcı bir çözüm bulmak için araştırmalar yaptım. CSS’in opacity özelliği ile selecti gizleyip üstte tutarak istedeğimiz görüntüyü elde ettiğmizi farkettim. Bir örnek ile açıklayalacak olursak;

HTML yapısı şu şekilde olsun;

<div class = "header">
  <a href="http://www.sinanoztop.com/category/css/"><em class = "fa fa-angle-left"></em>Diğer örnekleri inceleyebilmek için tıklayınız.</a>
</div>
<div class="content">
  <div class="box_wrapper">
    <h3>Örneği test edebilmek için seçim yapınız</h3>
    <br class = "clear" />
    <div class="select_box">
      <span>İl seçiniz</span>
      <em class = "fa fa-angle-down"></em>
      <select name="" id="">
        <option value="">İstanbul</option>
        <option value="">Ankara</option>
        <option value="">İzmir</option>
      </select>
    </div>
    <div class="select_box">
      <span>İl seçiniz</span>
      <em class = "fa fa-angle-down"></em>
      <select name="" id="">
        <option value="">İstanbul</option>
        <option value="">Ankara</option>
        <option value="">İzmir</option>
      </select>
    </div>
    <div class="select_box">
      <span>İl seçiniz</span>
      <em class = "fa fa-angle-down"></em>
      <select name="" id="">
        <option value="">İstanbul</option>
        <option value="">Ankara</option>
        <option value="">İzmir</option>
      </select>
    </div>
    <div class="select_box">
      <span>İl seçiniz</span>
      <em class = "fa fa-angle-down"></em>
      <select name="" id="">
        <option value="">İstanbul</option>
        <option value="">Ankara</option>
        <option value="">İzmir</option>
      </select>
    </div>
  </div>
</div>

CSS yapımızı ise;

@import url('https://fonts.googleapis.com/css?family=Roboto');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css');
html {
  height:100%;
}

body {
  height:100%;
}
* {margin:0;padding:0;list-style:none;box-sizing:border-box;font-family: 'Roboto', sans-serif;}
a {text-decoration: none;}

.content {
  width:1170px;
  height:100%;
  margin:0px auto;
  font-size:15px;
  color:#565656;
  line-height:22px;
}

.header {
  background:#444444;
  padding:25px 0;
}

.header a {
  display: inline-block;
  padding-left:25px;
  color:#ffffff;
}

.header a em {
  margin-right:12px;
}

.box_wrapper {
  margin-top:100px;
  padding:25px 0;
  border-top:1px solid #ededed;
  border-bottom:1px solid #ededed;
  text-align: center;
}

.box_wrapper:after {
  content:'';
  display: block;
  clear: both;
}

.select_box {
  width:22%;
  display: inline-block;
  padding:7px 14px;
  margin-right:5px;
  border:1px solid #dddddd;
  box-shadow:0 0 10px #ededed;
  font-size:14px;
  text-align: left;
  position: relative;
}

.select_box select {
  width:100%;
  height:100%;
  position: absolute;
  left:0;
  top:0;
  opacity: 0;
  cursor: pointer;
}

.select_box em {
  float:right;
  margin-top: 3px;
}

Javascript kodlarımız ise;

$(function(){
    $(".select_box select").on("change",function(){
      var text = $(this).find('option:selected').text();
      $(this).parent().find('span').html(text);
    });
  });

Örneğin canlı demosu için buraya tıklayınız.

One Response to “CSS ile özel select yapimi”

Bir Cevap Yazın