में काम नहीं करती है, मैं एक चयन/ड्रॉपडाउन की पृष्ठभूमि के लिए एक छवि का उपयोग करना चाहता हूं। निम्नलिखित सीएसएस Firefox और IE में ठीक काम करता है, लेकिन क्रोम में नहीं करता है:चयन (ड्रॉपडाउन) के लिए पृष्ठभूमि छवि क्रोम
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
आम तौर पर, यह शैली मानक फार्म नियंत्रण के लिए एक बुरा व्यवहार माना जाता है क्योंकि उत्पादन प्रत्येक ब्राउज़र पर बहुत अलग लग रहा है। देखें: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ कुछ प्रस्तुत उदाहरणों के लिए।
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
गूगल क्रोम अभी भी रंग में पृष्ठभूमि छवि है कि आप RGBA के पास की चोटी पर एक ढाल renders (:
कहा जा रहा है, मैं कुछ पृष्ठभूमि रंग एक RGBA मूल्य बनाने भाग्यशाली रहे हैं आर, जी, बी, 0.1) लेकिन एक रंग चुनना जो आपकी छवि की प्रशंसा करता है और अल्फा 0.1 बनाने से इसका प्रभाव कम हो जाता है।
क्या आर्ने ने कहा - आप भरोसेमंद चयन बॉक्स नहीं बना सकते हैं और उन्हें ब्राउज़रों में लगातार कुछ दिखने लगते हैं।
वर्दी: https://github.com/pixelmatrix/uniform एक जावास्क्रिप्ट समाधान है जो आपको अपने फॉर्म तत्वों पर अच्छा ग्राफिक नियंत्रण देता है - यह अभी भी जावास्क्रिप्ट है, लेकिन यह इस समस्या को हल करने के लिए जावास्क्रिप्ट के रूप में अच्छा है।
धन्यवाद। मेरे जीवन को बहुत आसान बना दिया – heymrcarter
धन्यवाद। बहुत अच्छा ... – AEMLoviji
select
{
-webkit-appearance: none;
}
यदि आपको आवश्यकता है तो आप पृष्ठभूमि के हिस्से के रूप में तीर वाली एक छवि भी जोड़ सकते हैं।
आप सीएसएस शैलियों नीचे सभी ब्राउज़रों के लिए Firefox 30 को छोड़कर
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
डेमो पृष्ठ का उपयोग कर सकते हैं - http://kvijayanand.in/jquery-plugin/test.html
अपडेट किया गया
यहाँकस्टम के लिए Firefox 30. थोड़ा चाल के लिए समाधान है फ़ायरफ़ॉक्स में तत्वों का चयन करें: -मोज़-कोई() सीएसएस छद्म वर्ग। तत्व का चयन करने के लिए लागू करने के लिए वर्ग
जोड़ना लाइन ऊंचाई समस्या का हल। धन्यवाद। इस मणि के लिए –