<select> टैग के लिए ग्रेडियेंट शैली?

Question

मैं एक ऐसा फॉर्म बनाने की कोशिश कर रहा हूं जहां इनपुट फ़ील्ड की पृष्ठभूमि ढाल पृष्ठभूमि के साथ स्टाइल हो। यह सभी <input> टैग के लिए सफल है, लेकिन <select> टैग के लिए नहीं। क्या यह किया जा सकता है? क्या मुझसे कुछ गलत हो रही है?

सीएसएस मैं उपयोग कर रहा हूँ:

form#contact input[type="text"], input[type="url"], 
input[type="email"], input[type="tel"], textarea, select { 
    margin: 3px 0 0 0; 
    padding: 6px; 
    width: 260px; 
    font-family: arial, sans-serif; 
    font-size: 12px; 
    border: 1px solid #ccc; 
    background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px); 
} 

नीचे चित्र देखें।

Answer 1

स्टाइलिंग <select> ब्राउज़र के ओएस से मेल खाने के लिए नियंत्रण करने और नियंत्रण देने के बाद मुश्किल है। आप ढाल को सक्षम करने के लिए -webkit-appearance: none; जोड़ सकते हैं लेकिन इससे तीर भी हटा दिया जाएगा।

Add gradient to select box w/ CSS3 in chrome? देखें और Background Image for Select (dropdown) does not work in Chrome

या अगर आप jQuery या प्रोटोटाइप का उपयोग कर सकते हैं, मैं अत्यधिक उत्कृष्ट Chosen plugin जिसमें <select> एक ड्रॉपडाउन कि स्टाइल किया जा सकता है की जगह सलाह देते हैं।

संपादित करें: मुझे स्टाइलिंग फॉर्म तत्वों को कभी-कभी फेंकना पड़ता है। एरिक मेयर का article on the subject अच्छा पृष्ठभूमि पढ़ने है।

Answer 2

आप डिबग करने के लिए कि फ़ायरबग में करने की कोशिश की है?

पृष्ठभूमि को महत्वपूर्ण बनाने के बारे में कैसे?

form#contact input[type="text"], input[type="url"], 

    input[type="email"], input[type="tel"], textarea, select { 
     margin: 3px 0 0 0; 
     padding: 6px; 
     width: 260px; 
     font-family: arial, sans-serif; 
     font-size: 12px; 
     border: 1px solid #ccc; 
     background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF)) !important; 
     background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px) !important; 
    } 

Answer 3

आपके द्वारा उपयोग किए जा रहे ऑपरेटिंग सिस्टम और इंटरनेट ब्राउज़र के कारण आपको इसकी समस्या हो सकती है।

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

आप यहां इस बारे में अधिक जानकारी प्राप्त कर सकते हैं: http://uniformjs.com/।

मुझे उम्मीद है कि इससे मदद मिलती है।