Mac OSX için HTML Select nesnelerini CSS ile biçimlendirme

Uzun süredir CSS üzerine birşeyler eklememiştim. Karşılaştığım bir sorunu çözümü ile bayağı uğraştım. Kullandığım PC Laptop ekranında herşey düzgün görünürken ve çeşitli mobil ekranlarda sorunsuz sayfa kendini ayarlarken nedense Apple grubu ekranlarda sayfa ayarlayamıyordu. Özellikle seçim kutularına ait (selectbox) nesnelerde oluşan bu sorunun çözümünü buldum.


İlk önce normal select seçim kutusu HTM kodlarını sonra CSS biçimlendirme kodlarını paylaşayım.

HTML Kodu:

<div class="label">Bağış Türü</div>
    <select  name="tur" class="full_selectbox">
  <option value="Standart">Standart Bağış</option>
  <option value="Zekat">Zekat</option>
  </select>

CSS Kodu:

.full_selectbox{
  margin-left: 2%;
  width: 48%;
  margin-top:7px;
  padding:8px 5px 10px 5px;
  text-align: left;
  color:#333;
  border:1px solid #CCC;
  font-size:14px;
  border-radius: 4px;
  float:left;
  display: block;
  vertical-align: middle;
}
 




Şimdi aşağıdaki satırı ekleyelim. Bu işlem ile Chrome webkit kütüphanesi üzerindeki OSX etkisini kaldırıyoruz.

-webkit-appearance:none;

Ve sonuç aşağıdaki gibi oluyor.



 
.full_selectbox{
margin-left: 2%;
width: 48%;
  margin-top:7px;
  padding:8px 5px 10px 5px;
  text-align: left;
  color:#333;
  border:1px solid #CCC;
  font-size:14px;
  border-radius: 4px;
  float:left;
  display: block;
  vertical-align: middle;
    -webkit-appearance:none;
}
 


 
İyi çalışmalar dilerim.
Oğuzhan TAŞ
Mayıs, 2020

Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 23 Makale