Bir <select>
açılır menüsünü biçimlendirmenin yalnızca CSS ile yapılabilecek bir yolu var mı?
Bir <select>
formunu JavaScript kullanmadan mümkün olduğunca stilize etmem gerekiyor. CSS'de bunu yapmak için kullanabileceğim özellikler nelerdir?
Bu kodun tüm büyük tarayıcılarla uyumlu olması gerekir:
JavaScript ile yapabileceğimi biliyorum: Örnek.
Ve basit bir stilden bahsetmiyorum. Sadece CSS ile en iyi ne yapabileceğimizi bilmek istiyorum.
Stack Overflow'da benzer sorular buldum.
Ve bu Doctype.com'da.
Seçme öğesini ve açılır menü özelliğini stilize etmek zordur.
Chris Heilmann tarafından yazılan select öğesi için stil nitelikleri, Ryan Dohery'nin ilk cevaba yaptığı yorumda söylediklerini doğrulamaktadır:
"Select öğesi, aşağıdaki öğelerin bir parçasıdır işletim sistemi, tarayıcı chrome değil. Bu nedenle, çok güvenilmezdir ve bunu denemek mantıklı olmayabilir. her neyse. "
<select>
etiketleri, tarayıcıda işlenen bir HTML sayfasındaki diğer HTML öğeleri gibi CSS aracılığıyla şekillendirilebilir. Aşağıda, sayfada bir select öğesini konumlandıracak ve seçeneklerin metnini mavi renkte oluşturacak (aşırı basit) bir örnek bulunmaktadır.
Örnek HTML dosyası (selectExample.html):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select Styling</title>
<link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="cherry">Cherry</option>
</select>
</body>
</html>
Örnek CSS dosyası (selectExample.css):
/* All select elements on page */
select {
position: relative;
}
/* Style by class. Effects the text of the contained options. */
.blueText {
color: #0000FF;
}
/* Style by id. Effects position of the select drop down. */
#styledSelect {
left: 100px;
}
Evet. Herhangi bir HTML öğesine etiket adıyla stil verebilirsiniz, bunun gibi:
select {
font-weight: bold;
}
Elbette, diğer öğeler gibi stil vermek için bir CSS sınıfı da kullanabilirsiniz:
<select class="important">
<option>Important Option</option>
<option>Another Important Option</option>
</select>
<style type="text/css">
.important {
font-weight: bold;
}
</style>