Sarı renkliyi çoklu seçili açılan kutudaki seçili öğelere vermek istiyorum. Varsayılan olarak, seçtikten sonra gri arka planı vardır, Bunu HTML, CSS içinde yapmak istiyorum.Seçilen öğelerdeki arkaplan rengini multiselect açılır kutusunda nasıl değiştirebilirim?
Bu konuda herhangi biri yardımcı olabilir mi?
Biz document object modelini seçmek için JS kullanabilirsiniz.
$('select').change(function() {
$('option').css('background', 'none');
$('option:selected').css('backgroundColor', 'red');
}).change()
<select>
<option>1111111</option>
<option>222222222</option>
<option>33333333</option>
<option>44444444</option>
</select>
Yapamazsınız. <option> öğesi CSS stilini kabul etmiyor.
JavaScript tabanlı bir alternatif kullanabilirsiniz. Mevcut birçok
<select>değiştirme komut dosyası bulunmaktadır.
değil gerçek% 100 korkuyor ... Modern tarayıcılar bu izin veriyoruz ben değilim. FireFox'ta deneyin; ancak çapraz tarayıcı güvenilir değil. – Pebbl
Teşekkür @Diodeus, Aşağıdaki gibi stil için Javascript ile bana yardımcı olabilir misiniz. ** selected {/ * Metin rengi ve yazı tipi ağırlığı, kırmızı ve koyu */ renk: mavi; font-weight: bold; } ** – user9371102
JavaScript, bunu standart bir seçim öğesiyle yapamaz. Bakınız: http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx –
şu ancak varsayılan seçilmiş şekillendirici çoğu durumda geçersiz kılar, (şekillendirme seçeneği etiketlerine izin tarayıcılar için) çalışmalıdır. Bununla birlikte bu devre dışı bırakmak için bir yol bulmak mümkün olabilir:
css
select option.selected {
font-weight: bold;
color: red;
}
javascript
function highlight_options(field){
var i,c;
for(i in field.options){
(c=field.options[i]).className=c.selected?'selected':'';
}
}
biçimlendirme
<select onchange="highlight_options(this)" multiple="multiple">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
'dan bahsettiğiniz gibi çalışmaz Teşekkürler @pebbl, sistem rengi geçersiz kılıyor, http: // jsfiddle.net/rZuYz/ – user9371102
@VicKyAmr Evet, maalesef dediğim gibi. Görünüşe göre, en azından bulduğum kadarıyla bunu kaldıramazsın. Tümü vurgu, seçenek öğesinin bir özelliği olmadığından, üstte bir katmandır. Bununla birlikte, kenarlık ve dolgu gibi, geçersiz kılınmayan stilleri hala etkileyebilirsiniz. Stilleri ve arka plan resimlerini seçilmemiş seçeneklere uygulayarak daha çekici hale getirebilirsiniz. – Pebbl
Bu, FF'de çalışmaz :( – t1gor
Saf CSS burada yardımcı olacaktır:
option:checked
<style>
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: inherit;
color: lightgray;
}
</style>
blokunun içinde kendi stil ekleyin.
Aşağıdaki css yardımıyla kolayca yapabiliriz.
select option:checked{ background: #1aab8e -webkit-linear-gradient(bottom, #1aab8e 0%, #1aab8e 100%); }
Çoklu seçimlerle çalışmaz :( – t1gor
Bu, benim için birden çok seçim için de işe yaramadı. –