html - फ़ायरफ़ॉक्स में किसी चयनित तत्व से तीर को कैसे हटाएं




css firefox css3 (25)

मैं CSS3 का उपयोग कर एक select तत्व शैली बनाने की कोशिश कर रहा हूँ। मुझे वेबकिट (क्रोम / सफारी) में जो परिणाम चाहिए वो मिल रहा है, लेकिन फ़ायरफ़ॉक्स अच्छी तरह से खेल नहीं रहा है (मैं आईई के साथ भी परेशान नहीं हूं)। मैं CSS3 appearance संपत्ति का उपयोग कर रहा हूं, लेकिन किसी कारण से मैं फ़ायरफ़ॉक्स से ड्रॉप-डाउन आइकन को हिला नहीं सकता।

मैं जो कर रहा हूं उसका एक उदाहरण यहां दिया गया है: http://jsbin.com/aniyu4/2/edit

#dropdown {
 -moz-appearance: none;
 -webkit-appearance: none;
 appearance: none;
 background: transparent url('example.png') no-repeat right center;
 padding: 2px 30px 2px 2px;
 border: none;
}

जैसा कि आप देख सकते हैं, मैं कुछ भी कल्पना की कोशिश नहीं कर रहा हूं। मैं बस डिफ़ॉल्ट शैलियों को हटाना चाहता हूं और अपने ड्रॉप-डाउन तीर में जोड़ना चाहता हूं। जैसे मैंने कहा, वेबकिट में बढ़िया, फ़ायरफ़ॉक्स में बहुत अच्छा नहीं है। जाहिर है, -moz-appearance: none ड्रॉप-डाउन आइटम से छुटकारा -moz-appearance: none पाता है।

कोई विचार? नहीं, जावास्क्रिप्ट एक विकल्प नहीं है


Answers

The other answers didn't seem to work for me, but I found this hack. This worked for me (July 2014)

select {
-moz-appearance: textfield !important;
    }

In my case, I also had a woocommerce input field so I used this

.woocommerce .quantity input.qty {
-moz-appearance: textfield !important;
 }

इनपुट के बजाए शो का चयन करने के लिए मेरा उत्तर अपडेट किया गया


या, आप चयन क्लिप कर सकते हैं। लाइनों के साथ कुछ:

select { width:200px; position:absolute; clip:rect(0, 170px, 50px, 0); }

यह तीर को अलग करने, चयन बॉक्स के दाहिने तरफ के 30px क्लिप करना चाहिए। अब 170 पीएक्स पृष्ठभूमि छवि और वॉयला, स्टाइल का चयन करें


एक पूर्ण समाधान नहीं है, लेकिन मुझे पता चला है कि ...

-moz-appearance: window;

... कुछ हद तक काम करता है। आप पृष्ठभूमि (-color या -image) को नहीं बदल सकते हैं लेकिन तत्व को रंग के साथ अदृश्य किया जा सकता है: पारदर्शी। सही नहीं है लेकिन यह एक शुरुआत है और आपको सिस्टम स्तर तत्व को जेएस के साथ बदलने की आवश्यकता नहीं है।


मुझे एक ही समस्या थी। इसे एफएफ और क्रोम पर काम करना आसान है, लेकिन आईई पर (8+ हमें समर्थन करने की आवश्यकता है) चीजें जटिल हो जाती हैं। कस्टम चयन तत्वों के लिए मुझे सबसे आसान समाधान मिल सकता है जो IE8 समेत "हर जगह मैंने कोशिश की" काम करता है .customSelect() का उपयोग कर रहा है।


/* Try this in FF30+ Covers up the arrow, turns off the background */ 
/* still lets you style the border around the image and allows selection on the arrow */


@-moz-document url-prefix() {

    .yourClass select {
        text-overflow: '';
        text-indent: -1px;
        -moz-appearance: none;
        background: none;

    }

    /*fix for popup in FF30 */
    .yourClass:after {
        position: absolute;
        margin-left: -27px;
        height: 22px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        content: url('../images/yourArrow.svg');
        pointer-events: none;
        overflow: hidden;
        border-right: 1px solid #yourBorderColour;
        border-top: 1px solid #yourBorderColour;
        border-bottom: 1px solid #yourBorderColour; 
    }
}

आप बॉक्स की चौड़ाई बढ़ा सकते हैं और तीर को तीर के बाईं ओर ले जा सकते हैं। यह आपको एक खाली सफेद div के साथ तीर को कवर करने की अनुमति देता है।

एक नज़र डालें: http://jsbin.com/aniyu4/86/edit


यह एक बड़ा हैक है, लेकिन -moz-appearance: menulist-text चाल कर सकता है।


pointer-events संपत्ति का उपयोग करें।

यहां विचार मूल ड्रॉप डाउन तीर (हमारे कस्टम एक बनाने के लिए) पर एक तत्व को ओवरले करना है और फिर उस पर सूचक घटनाओं को अस्वीकार करना है। [ इस पोस्ट को देखें]

इस विधि का उपयोग कर एक काम कर रहे FIDDLE

इसके अलावा, इस SO उत्तर में मैंने इस और अन्य तरीकों से अधिक विस्तार से चर्चा की।


यहां और वहां बहुत सी चर्चाएं हो रही हैं लेकिन मुझे इस समस्या के लिए कुछ उचित समाधान नहीं दिख रहा है। अंत में आईई और फ़ायरफ़ॉक्स पर इस हैक करने के लिए एक छोटा jquery + सीएसएस कोड लिखकर समाप्त हुआ।

Jquery का उपयोग कर एलिमेंट चौड़ाई (चयन तत्व) की गणना करें। चयन तत्व के चारों ओर एक रैपर जोड़ें और इस तत्व के लिए अतिप्रवाह छिपा रखें। सुनिश्चित करें कि इस रैपर की चौड़ाई एपॉक्स है। चयन तत्व के रूप में 25px कम। यह आसानी से Jquery के साथ किया जा सकता है। तो अब हमारा आइकन चला गया है ..! और यह SELECT तत्व पर हमारे छवि आइकन जोड़ने का समय है ... !!! पृष्ठभूमि जोड़ने के लिए बस कुछ सरल रेखाएं जोड़ें और आप सब खत्म हो गए हैं .. !! बाहरी आवरण के लिए छुपा ओवरफ्लो का उपयोग सुनिश्चित करें,

यहां कोड का एक नमूना है जो ड्रूपल के लिए किया गया था। हालांकि ड्रूपल विशिष्ट कोड की कुछ पंक्तियों को हटाकर दूसरों के लिए भी इस्तेमाल किया जा सकता है।

/*
 * Jquery Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */
(function($) {
  Drupal.behaviors.nwsJS = {
    attach: function(context, settings) {
      $('.form-select').once('nws-arrow', function() {
        $wrap_width = $(this).outerWidth();
        $element_width = $wrap_width + 20;
        $(this).css('width', $element_width);
        $(this).wrap('<div class="nws-select"></div>');
        $(this).parent('.nws-select').css('width', $wrap_width);
      });
    }
  };
})(jQuery);
/*
 * CSS Code for Removing Dropdown Arrow.
 * @by: North Web Studio
 */

.nws-select {
  border: 1px solid #ccc;
  overflow: hidden;
  background: url('../images/icon.png') no-repeat 95% 50%;
}
.nws-select .form-select {
  border: none;
  background: transparent;
}

समाधान सभी ब्राउज़रों आईई, क्रोम और फ़ायरफ़ॉक्स पर काम करता है सीएसएस का उपयोग कर निश्चित चौड़ाई हैक जोड़ने की कोई ज़रूरत नहीं है। यह सभी JQuery का उपयोग गतिशील रूप से संभाला जा रहा है।

अधिक वर्णित: - http://northwebstudio.com/blogs/1/jquery/remove-drop-down-arrow-html-select-element-using-jquery-and-css


If you don't mind fiddling with JS, I wrote a small jQuery plugin that helps you do it. With it you don't need to worry about vendor prefixes.

 $.fn.magicSelectBox = function() {
  var $e = this;

  $e.each(function() {
    var $select = $(this);

    var $magicbox = $('<div></div>').attr('class', $select.attr('class')).attr('style', $select.attr('style')).addClass('magicbox');
    var $innermagicbox = $('<div></div>').css({
      position: 'relative',
      height: '100%'
    });
    var $text = $('<span></span>').css({
      position: 'absolute'
    }).text($select.find("option:selected").text());

    $select.attr('class', null).css({
      width: '100%',
      height: '100%',
      opacity: 0,
      position: 'absolute'
    }).on('change', function() {
      $text.text($select.find("option:selected").text());
    });

    $select.parent().append($magicbox);
    $innermagicbox.append($text, $select);
    $magicbox.append($innermagicbox);
  });

  return $e;
};

Fiddle here: JS Fiddle

The condition is that you have to style the select from scratch (this means setting the background and border), but you probably want to do this anyway.

Also since the function substitutes the original select with a div, you will lose any styling done directly on the select selector in your CSS. So give the select element a class and style the class.

Supports most modern browsers, if you want to target older browsers, you can try an older version of jQuery, but perhaps have to replace on() with bind() in the function (not tested)


चूंकि फ़ायरफ़ॉक्स 35, " -moz-appearance:none " जिसे आपने पहले से ही अपने कोड में लिखा है, अंततः वांछित के रूप में तीर बटन हटा दें।

यह उस संस्करण के बाद से हल किया गया एक bugzilla.mozilla.org/show_bug.cgi?id=649849 था।


मेरे लिए एक उपयोगी हैक (चयन) को inline-flex पर सेट करना है। मेरे चयन बटन से सीधे तीर काटता है। सभी जोड़ा कोड के बिना।

  • केवल एफएक्स के लिए। क्रोम, इत्यादि के लिए अभी भी जरूरी -webkit appearance ...

इस तरह से प्रयास करें:

-webkit-appearance: button;
-moz-appearance: button;

फिर, आप एक अलग छवि का उपयोग पृष्ठभूमि के रूप में कर सकते हैं और इसे स्थानांतरित कर सकते हैं:

background-image: url(images/select-arrow.png);
background-position: center right;
background-repeat: no-repeat;

मोज़ ब्राउज़र के लिए एक और तरीका है:

text-indent:10px;

यदि आपके पास चयन करने के लिए एक चौड़ाई निर्धारित है, तो यह संपत्ति चयनित क्षेत्र के नीचे डिफ़ॉल्ट ड्रॉपबॉक्स बटन दबाएगी।

इससे मेरा काम बनता है! ;)


@ JoãoCunha द्वारा उत्तर पर निर्माण, एक सीएसएस शैली जो एक ब्राउज़र के लिए उपयोगी है

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
    text-indent: 0.01px;
    text-overflow: '';
}
/*for IE10*/
select::-ms-expand {
    display: none;
}

हमें ऐसा करने का एक सरल और सभ्य तरीका मिला है। यह क्रॉस-ब्राउजर है, अपमानजनक है, और फॉर्म पोस्ट तोड़ नहीं देता है। पहले चयन बॉक्स की opacity 0 सेट करें।

.select { 
    opacity : 0;
    width: 200px;
    height: 15px;
}

<select class='select'>
    <option value='foo'>bar</option>    
</select>

ऐसा इसलिए है कि आप अभी भी उस पर क्लिक कर सकते हैं

फिर चयन बॉक्स के समान आयामों के साथ div बनाओ। Div को पृष्ठभूमि के रूप में चयन बॉक्स के नीचे रखना चाहिए। इसे प्राप्त करने के लिए { position: absolute } और z-index का उपयोग करें।

.div {
    width: 200px;
    height: 15px;
    position: absolute;
    z-index: 0;
}

<div class='.div'>{the text of the the current selection updated by javascript}</div>
<select class='select'>
    <option value='foo'>bar</option>    
</select>

जावा के आंतरिक HTML को जावास्क्रिप्ट के साथ अपडेट करें। JQuery के साथ Easypeasy:

$('.select').click(function(event)) { 
    $('.div').html($('.select option:selected').val());
}

बस! बस चयन बॉक्स के बजाय अपने div शैली। मैंने उपर्युक्त कोड का परीक्षण नहीं किया है, इसलिए आपको शायद इसे ट्विक करने की आवश्यकता होगी। लेकिन उम्मीद है कि आप समझ लेंगे।

मुझे लगता है कि यह समाधान धड़कता है {-webkit-appearance: none;} । सबसे ज्यादा ब्राउज़रों को फॉर्म तत्वों के साथ बातचीत करने के लिए क्या करना चाहिए, लेकिन निश्चित रूप से पृष्ठ पर उनके डिजाइन को तोड़ने के तरीके पर प्रदर्शित नहीं किया गया है।


महत्वपूर्ण अद्यतन:

फ़ायरफ़ॉक्स वी 35 के रूप में उपस्थिति संपत्ति अब काम करता है !!

V35 पर फ़ायरफ़ॉक्स के आधिकारिक रिलीज नोट्स से :

एक combobox पर किसी none मूल्य के साथ -moz-appearance का उपयोग अब ड्रॉपडाउन बटन (बग 649849) को हटा दें।

तो अब डिफ़ॉल्ट तीर को छिपाने के लिए - यह हमारे चुनिंदा तत्व पर निम्नलिखित नियम जोड़ने जैसा आसान है:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

DEMO

select {
  margin: 50px;
  border: 1px solid #111;
  background: transparent;
  width: 150px;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>


अद्यतन: यह फ़ायरफ़ॉक्स v35 में तय किया गया था। विवरण के लिए पूरी जानकारी देखें।

बस फ़ायरफ़ॉक्स से चुनिंदा तीर को हटाने का तरीका पता लगाया गया। यह चाल -prefix-appearance , text-indent और text-overflow मिश्रण का उपयोग करना है। यह शुद्ध सीएसएस है और इसके लिए कोई अतिरिक्त मार्कअप की आवश्यकता नहीं है।

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

विंडोज 8, उबंटू और मैक, फ़ायरफ़ॉक्स के नवीनतम संस्करणों पर परीक्षण किया गया।

लाइव उदाहरण: http://jsfiddle.net/joaocunha/RUEbp/1/

विषय पर अधिक: https://gist.github.com/joaocunha/6273016


जॉर्डन यंग का जवाब सबसे अच्छा है। लेकिन अगर आप अपना एचटीएमएल नहीं बदलना चाहते हैं या नहीं बदल सकते हैं, तो आप क्रोम, सफारी इत्यादि में दिए गए कस्टम डाउन एरो को हटाने और फ़ायरफ़ॉक्स के डिफ़ॉल्ट तीर को छोड़ने पर विचार कर सकते हैं - लेकिन बिना डबल तीरों के। आदर्श नहीं है, लेकिन एक अच्छा त्वरित फिक्स जो कोई HTML नहीं जोड़ता है और अन्य ब्राउज़रों में आपके कस्टम लुक को समझौता नहीं करता है।

<select>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

सीएसएस:

select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
  select {
    background-image: none;
  }
}

यह काम करता है (फ़ायरफ़ॉक्स 23.0.1 पर परीक्षण):

select {
    -moz-appearance: radio-container;
}

मेरे लिए काम करने वाली चाल 100% से अधिक चुनिंदा चौड़ाई बनाना और ओवरफ्लो लागू करना है: छुपा हुआ

select {
    overflow:hidden;
    width: 120%;
}

एफएफ में ड्रॉपडाउन तीर को छिपाने के लिए अभी यह एकमात्र तरीका है।

Btw। यदि आप सुंदर ड्रॉपडाउन का उपयोग करना चाहते हैं Chosen


ठीक है, मुझे पता है कि यह सवाल पुराना है, लेकिन ट्रैक के नीचे 2 साल और मोज़िला ने कुछ भी नहीं किया है।

मैं एक साधारण कामकाज के साथ आया हूँ।

यह अनिवार्य रूप से फ़ायरफ़ॉक्स में चुनिंदा बॉक्स के सभी स्वरूपण को स्ट्रिप करता है और आपकी कस्टम शैली के साथ चुनिंदा बॉक्स के चारों ओर एक स्पैन तत्व लपेटता है, लेकिन केवल फ़ायरफ़ॉक्स पर ही लागू होना चाहिए।

मान लें कि यह आपका चयन मेनू है:

<select class='css-select'>
  <option value='1'> First option </option>
  <option value='2'> Second option </option>
</select>

और मान लें कि सीएसएस वर्ग 'सीएसएस-चयन' है:

.css-select {
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

फ़ायरफ़ॉक्स में, यह चुनिंदा मेनू के साथ प्रदर्शित होगा, इसके बाद बदसूरत फ़ायरफ़ॉक्स चयन तीर के बाद, आपके अच्छे कस्टम दिखने वाले एक के बाद। आदर्श नहीं।

अब यह फ़ायरफ़ॉक्स में जाने के लिए, कक्षा 'सीएसएस-चयन-मोज़' के साथ चारों ओर एक अवधि तत्व जोड़ें:

   <span class='css-select-moz'>
     <select class='css-select'>
       <option value='1'> First option </option>
       <option value='2'> Second option </option>
     </select>
   </span>

फिर मोज़िला के गंदे तीर को -मोज़-उपस्थिति के साथ छिपाने के लिए सीएसएस को ठीक करें: खिड़की और कस्टम तीर को अवधि के वर्ग 'सीएसएस-चयन-मोज़' में फेंक दें, लेकिन इसे केवल मोज़िला पर प्रदर्शित करने के लिए प्राप्त करें:

.css-select {
   -moz-appearance:window;
   background-image: url('images/select_arrow.gif');
   background-repeat: no-repeat;
   background-position: right center;
   padding-right: 20px;
}

@-moz-document url-prefix() {
.css-select-moz{
     background-image: url('images/select_arrow.gif');
     background-repeat: no-repeat;
     background-position: right center;
     padding-right: 20px;
  }
} 

3 घंटे पहले इस बग में केवल ठोकर खाने के लिए बहुत अच्छा (मैं वेब डिज़ाइन करने के लिए नया हूं और पूरी तरह आत्म-सिखाया जाता हूं)। हालांकि, इस समुदाय ने अप्रत्यक्ष रूप से मुझे बहुत मदद प्रदान की है, मैंने सोचा था कि यह लगभग कुछ समय था जब मैं कुछ वापस देता था।

मैंने केवल फ़ायरफ़ॉक्स (मैक) संस्करण 18 में परीक्षण किया है, और फिर 22 (अपडेट किए जाने के बाद)।

सभी प्रतिक्रिया का स्वागत है।


CSS3 से appearance संपत्ति none मूल्य की अनुमति noneडब्ल्यू 3 सी संदर्भ पर एक नज़र डालें। तो, आप जो करने का प्रयास कर रहे हैं वह मान्य नहीं है (वास्तव में क्रोम को भी स्वीकार नहीं करना चाहिए)।

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

मैं आपको selectBox jQuery प्लगइन का उपयोग करने पर विचार करने का सुझाव देता हूं। यह बहुत हल्का और अच्छी तरह से किया गया है।


मैं चयन को स्टाइल कर रहा हूं बस इसे पसंद करता हूं

<select style="     -moz-appearance: radio-container;
                -webkit-appearance: none;
                 appearance: none;
">

यह मेरे द्वारा परीक्षण किए गए सभी संस्करणों में एफएफ, सफारी और क्रोम में मेरे लिए काम करता है।

आईई में मैंने रखा:

 select::-ms-expand {
 display: none;
}
/*to remove in all selects*/

आप यह भी कर सकते हैं: .yourclass :: - ms-expand {display: none; } .yourid :: - ms-exapan {प्रदर्शन: कोई नहीं; }


try this css

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
}

Its working


अगर आपको पृष्ठभूमि छवियों को डाउनलोड करने में अजीब त्रुटियां हैं तो W3C लिंक चेकर का उपयोग करें: https://validator.w3.org/checklink

यहां आधुनिक मिश्रण हैं जिनका मैं उपयोग करता हूं (क्रेडिट: http://codepen.io/thebabydino/full/pjxVWp/ ):

.buttonAkc
{
    .gradientBackground(@imageName: 'accept.png');
    background-repeat: no-repeat !important;
    background-position: center right, top left !important;
}

.buttonAkc:hover
{
    .gradientBackgroundHover('accept.png');
}

.gradientBackground(@startColor: #fdfdfd, @endColor: #d9d9db, @imageName)
{
    background-color: mix(@startColor, @endColor, 60%); // fallback
    background-image: url("@{img-folder}/@{imageName}[email protected]{version}"); // fallback
    background: url("@{img-folder}/@{imageName}[email protected]{version}") no-repeat scroll right center, -webkit-linear-gradient(top, @startColor 0%, @endColor 100%) no-repeat scroll left top; // Chrome 10-25, Safari 5.1-6
    background: url("@{img-folder}/@{imageName}[email protected]{version}") no-repeat scroll right center, linear-gradient(to bottom, @startColor 0%, @endColor 100%) no-repeat scroll left top;
}

.gradientBackgroundHover(@imageName)
{
    .gradientBackground(#fdfdfd, #b5b6b9, @imageName);
}






html css firefox css3