jquery mobileのボタンにカスタム矩形アイコンを使用する

jquery mobileのボタンにカスタムアイコンを使用する必要があります。私にアイコンがあり、ボタンに入っています。しかし、私が直面している問題は、デフォルトのサークルがアイコンの周りに表示されます。この境界線サークルを削除してアイコンをそのまま表示する必要があります。この問題を解決するにはどうすればよいですか？アイコンが欠落していることに注意しますが、してくださいhttp://jsfiddle.net/yPRpt/jquery mobileのボタンにカスタム矩形アイコンを使用する

を - あなたがここでそれを見ることができます

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

：

<!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：

これは私が持っているhtmlですこの例では円を見ることができます。

出典

2011-07-05 user700284

jQuery Mobileのテーマがボタンに追加する半透明のサークルを削除できる唯一の方法は、関連するCSSおよび/またはJavascriptを特定してオーバーライドすることです。

また、カスタムアイコンを変更してjQMの機能を変更しないでください。

出典

2011-07-05 16:42:02 Ben

サークルを削除することはできません。

ドキュメント：

のjQueryモバイルフレームワーク...自動的にあなたがして非透明アイコンを作成することができるかもしれません

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

この部分は、このCSSはこのポストはよくGoogleで参照されているデフォルト黒色透明画像と丸みを帯びたカットオフ

出典

2012-07-25 07:01:43 sij

が今より良くなりました – sij

オーバーライドを

.ui-btn-corner-all { 

}

出典

2012-10-13 02:32:31

原因となっています。誰もがまだ簡単な解決策を探しているなら、私はちょうど1が見つかりました：これは、ソリューションの

出典

2013-02-05 15:48:42 bgallet

ようこそstackoverflow。あなたはjsfiddleの例に入れてください。ありがとう！ –

これは画像を完全に含むボタンを作成しますが、テキストが垂直方向にそろっていないという問題があります。おそらくCSSの変更も必要になるでしょう。 –

なし私のために働いていないのに役立ちます

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

希望を...

はちょうどあなたの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のボタンにカスタム矩形アイコンを使用する

答えて

関連する問題