एचटीएमएल/सीएसएस: चयन टैग के अंदर फ़्लोटिंग विकल्प टैग

Question

select के अंदर option एस के साथ इस सरल पहेली को देखें।

fiddle

इस क्रोम और एज में पूरी तरह से काम करने लगता है, लेकिन नहीं फ़ायरफ़ॉक्स में। क्या फ़ायरफ़ॉक्स में एक ही परिणाम प्राप्त करने के लिए कोई संभावना या हैक है?

<select size="8"> 
     <option></option> 
     <option></option> 
     <option></option> 
     <option></option> 
     <option class="flip"></option> 
     <option class="flip"></option> 
     <option class="flip"></option> 
     <option class="flip"></option> 
    </select> 

    select{ 
     width: 420px; 
     height: 200px; 
     overflow: hidden; 
    } 

    option{ 
     width: 100px; 
     height: 100px; 
     float: left; 
    } 

    select option:nth-child(odd){ 
     background: #aaa; 
    } 
    select .flip:nth-child(odd){ 
     background: #fff; 
    } 
    select .flip:nth-child(even){ 
     background: #aaa; 
    } 

Answer 1

एक चुनिंदा टैग के साथ उन्नत स्टाइल के लिए मैं एक वर्कअराउंड का उपयोग करने की सलाह देता हूं। क्योंकि:

<select> तत्व को "बदसूरत" विजेट माना जाता है क्योंकि इसे लगातार प्लेटफॉर्म पार करना असंभव है।

स्रोत: https://developer.mozilla.org

---

एक सरल समाधान का उदाहरण:

$('.dropdown-field').click(function(e) { 
 
    var $this = $(this); 
 
    $this.children('ul').slideToggle(100); 
 
    var $target = $(e.target); 
 
    if ($target.is('li')) { 
 
    $this.children('span').html($target.text()); 
 
    $this.find('input[type="hidden"]').val($target.attr('data-value')); 
 
    } 
 
});

.dropdown-field { 
 
    position: relative; 
 
    padding: 10px; 
 
    width: 300px; 
 
    height: 20px; 
 
    background: #ccc; 
 
    cursor: pointer; 
 
} 
 
.dropdown-field > ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.dropdown-field > ul li { 
 
    background: #ddd; 
 
    padding: 10px; 
 
    border-bottom: 1px solid #888; 
 
} 
 
.dropdown-field > ul li:hover { 
 
    background: #bbb; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="dropdown-field"> 
 
    <span>please select ...</span> 
 
    <ul> 
 
    <li data-value="1">Option 1</li> 
 
    <li data-value="2">Option 2</li> 
 
    <li data-value="3">Option 3</li> 
 
    <li data-value="4">Option 4</li> 
 
    </ul> 
 
    <input type="hidden" name="myfield" value=""> 
 
</div>

बेशक

आप अपनी आवश्यकताओं को यह समायोजित करने के लिए किया है। लेकिन अब आप इसे इच्छानुसार स्टाइल कर सकते हैं (क्रॉस प्लेटफॉर्म)।