在jquery mobile中按鈕中使用自定義的矩形圖標

我必須在jquery mobile中的按鈕中使用自定義圖標。我有我的圖標，它是在button.But我面臨的問題是，默認的圈子出現在我的圖標周圍。我需要刪除這個邊界圓圈，只顯示它的圖標。如何解決這個問題？在jquery mobile中按鈕中使用自定義的矩形圖標

這是HTML我有：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0" /> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> 
     <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
     <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script> 
      </head> 
    <body> 
     <div data-role="page" id="home"> 
      <div data-role="header" data-theme="b"> 
       <h1>Test</h1> 
      </div> 
      <div data-role="content" data-theme="b"> 
       <input type="button" data-inline="true" data-theme="b" data-icon="save-icon" data-iconpos="left" value="Save Data"></a> 
      </div> 
      <div data-role="footer" data-position="fixed" data-id="pFooter"> 
       <h1>Test</h1> 
      </div>  
     </div> 
    </body> 
</html>

和下面的CSS：

.ui-icon-save-icon{ 
    background: url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px; 
}

你可以在這裏看到它 - http://jsfiddle.net/yPRpt/

請注意，圖標丟失，但你可以在例子中看到圓圈。

來源

2011-07-05 user700284

您將能夠移除jQuery Mobile主題添加到按鈕的半透明圓圈的唯一方法是識別並覆蓋相關的CSS和/或JavaScript。

或者，爲什麼不修改您的自定義圖標以使用jQM的功能？我迄今發現做這個

來源

2011-07-05 16:42:02 Ben

我不認爲你可以刪除該圈子。

的文檔：

jQuery Mobile框架...自動添加一個半透明的黑色圓圈

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/buttons/buttons-icons.html

您可能能夠創建與非透明圖標背景與圓形一樣大，顏色與按鈕顏色相同，但我不確定這會起作用。（未經測試）

來源

2011-07-05 15:07:54

的唯一方法是設置「數據圖標」的元素屬性爲「自定義」，然後用透明的背景圖像

即在CSS樣式它在標記：

<a id="hlFind" data-role="button" data-icon="custom">Find</a>

在CSS：

#hlFind .ui-icon-custom { 
    background:url("images/icon_phone_green.png") no-repeat scroll 0 0 transparent; 
}

來源

2011-07-13 05:30:08 trevorgk

太棒了，謝謝你的好主意。他們的關鍵是「透明」。我有一個14x14的圖像，所以添加了「background-size：14px 14px」。我能夠刪除「滾動」並將「0 0」更改爲「2px 2px」。 – DemitryT

覆蓋下面的代碼中的jquery移動CSS文件

.ui-icon-searchfield:after { 
    background:       #666 /*{global-icon-color}*/; 
    background:       rgba(0,0,0,.4) /*{global-icon-disc}*/; 
    background-image: url(images/icons-18-white.png) /*{global-icon-set}*/; 
    background-repeat: no-repeat; 
    -moz-border-radius:     9px; 
    -webkit-border-radius:    9px; 
    border-radius:      9px; 
}

這部分導致了默認的黑色透明圖像和圓角剪裁取捨

來源

2012-07-25 07:01:43 sij

好像現在好了 – sij

覆蓋這個CSS

.ui-btn-corner-all { 

}

來源

2012-10-13 02:32:31

這篇文章是對谷歌以及引用。如果有人還在尋找一個簡單的解決方案，我只是找到了一個：

<p data-role="button"><img align="left" width="35px" src="something.jpg"/>Button name<p>

希望這將有助於

來源

2013-02-05 15:48:42 bgallet

歡迎使用stackoverflow。你能把它放在jsfiddle的例子中嗎？謝謝！ –

這會創建一個帶有完美圖像的按鈕，但問題在於文本不再垂直對齊。可能還需要CSS更改。 –

無解的工作對我來說...

只要把你的CSS代碼

.ui-icon-save-icon{ 
    background: url(save_icon.png) 50% 50% no-repeat; background-size: 19px 21px; 
}

，並添加：CSS事件後，默認的圈子大小設置爲0，默認的圈子就會消失！ :)

.ui-icon-save-icon:after { 
    width: 0px; 
    height: 0px; 
}

來源

2014-10-15 11:22:51 LeonardoX

在jquery mobile中按鈕中使用自定義的矩形圖標

回答

相關問題