jquery मोबाइल बटन

Question

के लिए कस्टम सीएसएस स्टाइल मेरे पास this button है जिसमें मैंने कस्टम आइकन जोड़ा है।

मैं आइकन के भीतर हल्का भूरे रंग को हटाना चाहता हूं।

यह हल्का भूरा आइकन का हिस्सा नहीं है, यह कहीं jquery के सीएसएस के भीतर होना चाहिए जो मुझे ओवरराइड करने में सक्षम होना चाहिए।

यह करने के लिए मैं अपने सीएसएस में क्या कर सकता हूं?

.ui-icon-my-map { 
    background-image: url("images/103-map.png"); 
    background-position: 4px 50%; 
    background-size: 26px 21px; 
    height: 24px; 
    margin-top: -12px !important; 
    width: 35px; 
} 

Answer 1

आपकी समस्या है:

.ui-icon, .ui-icon-searchfield::after { 
    background: #666; 
    background: rgba(0, 0, 0, .4); 
} 

सिर्फ

.ui-icon-my-map { 
[...] 
    background-color: transparent; 
} 

Answer 2

आप अपने सीएसएस के साथ overide (jQuery मोबाइल सीएसएस लोड के बाद कहते हैं, या अंत में महत्वपूर्ण जोड़ सकते हैं:

आप लिंक मैं प्रदान की है पर स्रोत देखें लेकिन यहाँ कर सकते हैं वर्तमान सीएसएस है)।

.ui-icon, .ui-icon-searchfield::after { 
background: none; 
} 

Answer 3

जोड़ने इस आदमी की शैली के लिए

<span class="ui-icon ui-icon-my-map ui-icon-shadow"></span> 

जोड़ें:

background-color: transparent; 

Answer 4

पारगमन के लिए अवधि का पृष्ठभूमि रंग सेट करें।

.ui-icon-my-map{ 
    background-color: transparent; 
} 

Answer 5

जाओ jquery.mobile-1.0.1.min.css के लिए और लाइन के लिए जाने के लिए और

url("images/icons-18-white.png") no-repeat scroll 0 0 transparent; 

बजाय

करने के लिए पृष्ठभूमि परिवर्तन पर फिर .ui-icon, .ui-icon-searchfield:after

लगता है

url("images/icons-18-white.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0.4) 

Answer 6

कुछ इस काम की तरह:

• http://jsfiddle.net/tR9Cj/

एचटीएमएल

<div data-role="page" id="home"> 
    <a id="bnt_edge" data-role="button" data-inline="false" data-transition="turn" href="#" rel="external" data-icon="my-map" data-theme="c" data-iconshadow="false">My Button</a> 
</div>​ 

सीएसएस

.ui-icon-my-map { 
    background-image: url("http://i.stack.imgur.com/zjB5L.png"); 
    background-position: 4px 50%; 
    background-size: 26px 21px; 
    height: 24px; 
    margin-top: -12px !important; 
    width: 35px; 
    background-color: transparent; 
}​