html - आईई पर चयन तीर निकालें




css css3 html-select (4)

आईई 9 में, @Spudley द्वारा सलाह दी गई है कि पूरी तरह से एक हैक के साथ यह संभव है। चूंकि आपने div की ऊंचाई और चौड़ाई को अनुकूलित किया है और चयन करें, आपको div:before को बदलने की आवश्यकता है div:before सीएसएस से आपका मिलान करने div:before

यदि यह आईई 10 है तो नीचे सीएसएस 3 का उपयोग करना संभव है

select::-ms-expand {
    display: none;
}

हालांकि यदि आप jQuery प्लगइन में रुचि रखते हैं, तो Chosen.js या आप जेएस में अपना खुद का निर्माण कर सकते हैं।

मेरे पास तत्व का चयन है, मैं तीर को हटाना चाहता हूं, फिर मैं अन्य आइकन जोड़ सकता हूं .. मैं फ़ायरफ़ॉक्स सफारी और क्रोम के लिए ऐसा कर सकता हूं, लेकिन यह IE9 पर काम नहीं करता है।

.styled-select select 
{
    border: 0 !important;  /*Removes border*/
    -webkit-appearance: none;  /*Removes default chrome and safari style*/
    -moz-appearance: none;  /*Removes default style Firefox*/
    background: url('select_icon.png')  no-repeat;
     background-position: 179px 7px;
     text-indent: 0.01px;
     text-overflow: "";
     color: #FCAF17;
     width:200px;
 }

Fiddle पर Fiddle देखें। मुझे जो कुछ चाहिए वह IE9 में तीर को हटा दें कृपया JSFIDDLE उत्तर दें।


मैं अपने समाधान का सुझाव दूंगा जो आप इस गिटहब रेपो में पा सकते हैं। यह आईई 8 और आईई 9 के लिए एक कस्टम तीर के साथ भी काम करता है जो आइकन फ़ॉन्ट से आता है।

कस्टम क्रॉस ब्राउज़र के उदाहरण कार्रवाई में ड्रॉप-डाउन : क्रॉस-ब्राउज़र सुविधा देखने के लिए उन्हें अपने सभी ब्राउज़रों से जांचें।

वैसे भी, आइए आधुनिक ब्राउज़र से शुरू करें और फिर हम पुराने लोगों के लिए समाधान देखेंगे।

क्रोम, फ़ायरफ़ॉक्स, ओपेरा, इंटरनेट एक्सप्लोरर 10+ के लिए ड्रॉप-डाउन एरो

इन ब्राउज़र के लिए, एक ही तीर रखने के लिए ड्रॉप-डाउन के लिए समान पृष्ठभूमि छवि सेट करना आसान है।

ऐसा करने के लिए, आपको ब्राउज़र के डिफ़ॉल्ट शैली को select टैग के लिए रीसेट करना होगा और नए पृष्ठभूमि नियम सेट करना होगा (जैसा कि पहले सुझाया गया है)।

select {
    /* you should keep these firsts rules in place to maintain cross-browser behaviour */
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
    background-image: url('<custom_arrow_image_url_here>');
    background-position: 98% center;
    background-repeat: no-repeat;
    outline: none;
    ...
}

यदि आप प्रत्येक तीर के लिए एक ही पहलू रखना चाहते हैं, तो आपको डिफ़ॉल्ट नियमों को रीसेट करने के लिए appearance नियम किसी भी पर सेट नहीं होते हैं, आपको उन्हें जगह में रखना चाहिए।

उदाहरणों में background नियम एसवीजी इनलाइन छवियों के साथ सेट हैं जो विभिन्न तीरों का प्रतिनिधित्व करते हैं। कुछ सीमाओं को दाएं किनारे पर रखने के लिए बाईं ओर से 98% स्थान पर स्थित हैं (आप अपनी इच्छानुसार स्थिति को आसानी से संशोधित कर सकते हैं)।

सही क्रॉस-ब्राउज़र व्यवहार को बनाए रखने के लिए, एकमात्र अन्य नियम जिसे स्थान पर outline है, outline । जब यह तत्व क्लिक किया जाता है तो यह नियम डिफ़ॉल्ट सीमा को रीसेट करता है (कुछ ब्राउज़रों में)। यदि आवश्यक हो तो अन्य सभी नियमों को आसानी से संशोधित किया जा सकता है।

आइकन फ़ॉन्ट का उपयोग कर इंटरनेट एक्सप्लोरर 8 (आईई 8) और इंटरनेट एक्सप्लोरर 9 (आईई 9) के लिए ड्रॉप-डाउन एरो

यह कठिन हिस्सा है ... या शायद नहीं।

इन ब्राउज़रों के लिए डिफ़ॉल्ट तीरों को छिपाने के लिए कोई मानक नियम नहीं है (जैसे select::-ms-expand आईएस 10 + के लिए select::-ms-expand )। समाधान ड्रॉप-डाउन के हिस्से को छिपाना है जिसमें डिफ़ॉल्ट तीर होता है और अन्य ब्राउज़र में उपयोग किए जाने वाले एसवीजी के समान तीर आइकन फ़ॉन्ट (या एक एसवीजी, यदि आप चाहें) डालें ( select सीएसएस नियम देखें उपयोग की जाने वाली इनलाइन एसवीजी के बारे में अधिक जानकारी)।

पहला कदम यह है कि ब्राउज़र को पहचानने वाले वर्ग को सेट करना: यही कारण है कि मैंने कोड की शुरुआत में सशर्त आईई आईएफ का उपयोग किया है। पुराने आईई ब्राउज़र को पहचानने के लिए इन आईएफ का उपयोग html टैग में विशिष्ट वर्गों को संलग्न करने के लिए किया जाता है।

उसके बाद, HTML में प्रत्येक select को एक div (या जो भी टैग जो तत्व को लपेट सकता है) द्वारा लपेटा जाना चाहिए। इस रैपर पर बस उस वर्ग को जोड़ें जिसमें आइकन फ़ॉन्ट है।

<div class="selectTagWrapper prefix-icon-arrow-down-fill">
    ...
</div>

आसान शब्दों में, इस रैपर का select टैग को अनुकरण करने के लिए किया जाता है।

ड्रॉप-डाउन की तरह कार्य करने के लिए, रैपर की सीमा होनी चाहिए, क्योंकि हम select से आने वाले व्यक्ति को छुपाते select

ध्यान दें कि हम select सीमा select उपयोग नहीं कर सकते हैं क्योंकि हमें डिफॉल्ट तीर को लपेटना है, इसे रैपर से 25% अधिक लंबा करना है। नतीजतन इसकी दाहिनी सीमा दिखाई नहीं देनी चाहिए क्योंकि हम overflow: hidden द्वारा 25% अधिक छुपाते हैं overflow: hidden नियम को स्वयं select लिए लागू किया जाता है।

कस्टम तीर आइकन-फ़ॉन्ट छद्म वर्ग में रखा गया है :before कि नियम content में तीर का संदर्भ होता है (इस मामले में यह सही संश्लेषण है)।

हम इस तीर को यथासंभव केंद्र में रखने के लिए एक पूर्ण स्थिति में रखते हैं (यदि आप विभिन्न आइकन फोंट का उपयोग करते हैं, तो उन्हें शीर्ष और बाएं मानों और फ़ॉन्ट आकार को बदलकर अवसरों को समायोजित करना याद रखें)।

.ie8 .prefix-icon-arrow-down-fill:before,
.ie9 .prefix-icon-arrow-down-fill:before {
    content: ")";
    position: absolute;
    top: 43%;
    left: 93%;
    font-size: 6px;
    ...
}

आप पृष्ठभूमि तीर या आइकन फ़ॉन्ट तीर को आसानी से बना सकते हैं और प्रतिस्थापित कर सकते हैं, जिसमें आप बस इसे background-image नियम में बदलना चाहते हैं या स्वयं द्वारा एक नई आइकन फ़ॉन्ट फ़ाइल बना सकते हैं।


यदि आप कक्षा और छद्म वर्ग का उपयोग करना चाहते हैं:

.simple-control आपके सीएसएस वर्ग है

:disabled छद्म वर्ग :disabled है

select.simple-control:disabled{
         /*For FireFox*/
        -webkit-appearance: none;
        /*For Chrome*/
        -moz-appearance: none;
}

/*For IE10+*/
select:disabled.simple-control::-ms-expand {
        display: none;
}

मेरा योगदान यहाँ है। एचएएमएल + कॉफ़ीस्क्रिप्ट + एससीएसएस

HAML
=f.collection_select :country_id, [us] + Country.all, :id, :name, {prompt: t('user.country')}, class: 'form-control'
Coffeescript
  $('select').on 'change', ->
    if $(this).val()
      $(this).css('color', 'black')
    else
      $(this).css('color', 'gray')
  $('select').change()
SCSS
select option {
  color: black;
}

सर्वर कोड को बदलकर केवल सीएसएस का उपयोग करना संभव है और केवल संपत्ति के वर्तमान मूल्य के आधार पर कक्षा शैलियों को सेट करना संभव है, लेकिन इस तरह से यह आसान और साफ दिखता है।

$('select').on('change', function() {
  if ($(this).val()) {
    return $(this).css('color', 'black');
  } else {
    return $(this).css('color', 'gray');
  }
});

$('select').change();
    select option {
      color: black;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="user[country_id]" id="user_country_id">
  <option value="">Country</option>
                      <option value="231">United States</option>
                      <option value="1">Andorra</option>
                      <option value="2">Afghanistan</option>
                      <option value="248">Zimbabwe</option></select>

जब आप खुलते हैं प्लेसहोल्डर ग्रे को रखने के लिए आप अधिक सीएसएस ( select option:first-child ) जोड़ सकते हैं, लेकिन मुझे इसकी परवाह नहीं है।





html css css3 html-select