होवर पर चयन सूची विकल्प पृष्ठभूमि रंग बदलें

Question

क्या होवर पर एक चयन सूची विकल्प का डिफ़ॉल्ट पृष्ठभूमि रंग बदलना संभव है?

HTML:

<select id="select"> 
    <option value="1">One</option> 
    <option value="2">Two</option> 
    <option value="3">Three</option> 
</select> 

मैं option:hover { background-color: red; } की कोशिश की है, लेकिन यह किसी काम का नहीं है। क्या किसी को भी पता है की यह कैसे किया जाता है?

Answer 1

चुनें/विकल्प तत्व ओएस द्वारा प्रदान किए जाते हैं, HTML नहीं। आप इन तत्वों के लिए शैली को बदल नहीं सकते हैं।

Answer 2

यह एक इंसेट बॉक्स छाया लागू करके किया जा सकता है। जैसे:

select.decorated option:hover { 
    box-shadow: 0 0 10px 100px #1882A8 inset; 
} 

यहाँ, .decorated एक वर्ग का चयन करें बॉक्स करने के लिए सौंपा है।

आशा है कि आपको बिंदु मिल जाएगा।

select>option:hover 
    { 
     color: #1B517E; 
     cursor: pointer; 
    } 

यह प्रयास करें, सही काम करता है:

Answer 3

इस तुम क्या जरूरत है, बच्चे Combinator है।

यहाँ संदर्भ है: http://www.w3schools.com/css/css_combinators.asp

Answer 4

मुझे पता है यह एक पुराने सवाल है, लेकिन मैं हाल ही में इस जरूरत को भर में आया था और निम्नलिखित समाधान jQuery और सीएसएस का उपयोग कर के साथ आया था:

jQuery('select[name*="lstDestinations"] option').hover(
     function() { 
      jQuery(this).addClass('highlight'); 
     }, function() { 
      jQuery(this).removeClass('highlight'); 
     } 
    ); 

और सीएसएस :

.highlight { 
    background-color:#333; 
    cursor:pointer; 
} 

शायद यह किसी और की सहायता करता है।

Answer 5

एक इनसेट बॉक्स छाया सीएसएस लागू करने Firefox पर काम करता है:

select option:checked, 
select option:hover { 
    box-shadow: 0 0 10px 100px #000 inset; 
} 

चेक किए गए विकल्प आइटम क्रोम में काम करता है:

select:focus > option:checked { 
    background: #000 !important; 
} 

Answer 6

एफएफ में भी सीएसएस फिल्टर ठीक काम करता है। जैसे रंग घुमाना:

option { 
    filter: hue-rotate(90deg); 
} 

https://jsfiddle.net/w3a740jq/4/

Answer 7

समस्या यह है कि यहां तक ​​कि जावास्क्रिप्ट नहीं देख option तत्व hovered किया जा रहा करता है।

window.onmouseover = function(e) 
{ 
console.log(e.target.nodeName); 
} 

केवल ब्राउज़र विक्रेताओं के लिए एक सदियों इंतजार कर के अलावा इस समस्या को हल करने के लिए (वैसे: यह सिर्फ (कम से कम किसी भी समय जल्द ही) बस सीएसएस का उपयोग करके यह कैसे हल किया जा करने के लिए नहीं जा रहा है पर जोर दिया है बग को ठीक करने के लिए, जो कुछ आप करने की कोशिश कर रहे हैं उससे जूझ रहे हैं) जावास्क्रिप्ट का उपयोग करके ड्रॉप-डाउन मेनू को अपने स्वयं के एचटीएमएल/एक्सएमएल के साथ प्रतिस्थापित करना है। इसमें select तत्व को ul तत्व के साथ input तत्व प्रति li तत्व के उपयोग की संभावना शामिल होगी।