kiểu dáng css tùy chỉnh cho nút di động jquery

Question

Tôi có this button mà tôi đã thêm biểu tượng tùy chỉnh vào.

Tôi muốn xóa màu xám sáng hơn nằm trong biểu tượng.

Màu xám nhạt này không phải là một phần của biểu tượng, nó phải ở đâu đó trong CSS của jquery mà tôi có thể xem được.

Tôi có thể làm gì để CSS của mình thực hiện việc này?

Bạn có thể xem mã nguồn vào liên kết tôi đã cung cấp nhưng đây là CSS hiện tại:

.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

vấn đề của bạn là:

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

chỉ cần thêm

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

Answer 2

Bạn có thể overide với css của bạn (đặt nó sau jquery css tải di động, hoặc thêm quan trọng ở cuối).

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

Answer 3

Đối với phong cách của anh chàng này

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

Add:

background-color: transparent; 

Answer 4

Đặt màu nền của khoảng cách thành trong suốt.

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

Answer 5

Đến jquery.mobile-1.0.1.min.css và đi đến dòng và tìm .ui-icon, .ui-icon-searchfield:after

Sau đó về biến đổi nền để

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

thay vì

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

Answer 6

Cái gì đó như công việc này:

• http://jsfiddle.net/tR9Cj/

HTML

<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>​ 

CSS

.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; 
}​