jQuery mobile 1.4.5和自定义按钮图像

时间：2017-02-27 14:01:04

标签： css button jquery-mobile

我需要使用自定义png而不是jQuery mobile的默认搜索图标。

我的默认按钮代码如下

<a href='@Url.Action("Search", "Home")' class="ui-btn ui-btn-icon-right ui-icon-search ui-btn-icon-notext ui-corner-all">Search</a>

我尝试像这样重新定义CSS 

.ui-icon-search { 
  background:
    url('images/search.png')
    50% 50% no-repeat!important; 
}

我看到了图片，但无法摆脱主题CSS设计。

enter image description here

更新＃1

我使用了用户 deblocker 的CSS，它看起来像

enter image description here

4 个答案:

答案 0 :(得分：3)

JQM使用:: after伪选择器作为按钮图标。

第一个例子：

我无法理解你的图标大小，所以我在这个例子中使用了一个更大的图标，32x32px图标来显示如何更改容器按钮的外观。

.ui-icon-search {
  height: 48px !important;
}
.ui-icon-search:hover:after {
  background-color: transparent !important;
  border-radius: 0 !important;
}
.ui-icon-search:after {
  width: 32px !important;
  height: 32px !important;
  background-size: 32px !important;
  background: 50% 50% no-repeat !important;
  border-radius: 0 !important;
  margin-left: -16px!important;
  margin-top: -16px!important;
  background-image: url(data:image/png;base64,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) !important;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="page-1">
    <div role="main" class="ui-content">
      <a href='#' class="ui-btn ui-btn-icon-right ui-icon-search ui-btn-icon-notext ui-corner-all">Search</a>
    </div>
  </div>
</body>

</html>

第二个例子：

从您的编辑中，您似乎需要在工具栏或导航栏中使用标准的22x22px按钮，因此CSS更简单。

此外，我添加了一些 JQM简易规则（此答案中的一些积分codaniel：JQuery Mobile: how to not display the button focus halo when a button is clicked?，另请参阅Omar中的这篇精彩帖子：{ {3}}

随意查看，恕我直言，这将是一个更清洁，移动友好的外观。

.ui-btn-inline.ui-icon-search {
  background-color: transparent !important;
  border-style: none !important;
}
.ui-icon-search:after {
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAB3RJTUUH4QMCCBQRtmh2wwAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAQgSURBVHjatZRbaBxVGMe/c+Y+mb1PNpfdbjepSW3TKNJYk4K1BSF50EihyYO1hIjkrQ9F30NeFAXBB1/6GN+aShGJio+lUCtBiwqJTbfZJE2y2exm7zv3mePZQGsKuVCLH3znMHPO95s//+/MAfifAu1+mJi4zvX2qr3t7ZFLGDMXBVlOchyLMbjrAs/+6DjkRjpdmBsfv2AcBmZ2f+Ty5Q/GY/HmL10xOBTuSPrD0QgJq0FPDIQUy8WnZYEZapJZfmDgtXuzs7PeoYobShMJYSyeTHxmhuNC8tQRFPXzyMdhkDCAQwDKukM21yskgjRPKxW+KhbtL4aH+7T9wLgxqKrVGwj6PtmAZtbX2QGsKGIbMNJdQFUHkEZnQi2RYkG0ZMpEVpQJv58/f5DiHbAgyJc2Nb4Nt3YS22WZGtVRcwAq7r9ZpWm4GHuKH6/VJVkUmQ8PBWu6dTHrteWKpmBUNCBlCi7VKIy2qGLRNKkVdYBihb6zMN6wJNMhzODMzF1pPzDbGBwPJR9kyK8lw8qf7eESXTEc9whWdBMcy/K2LRdsFpOghxh/XcOoUiPIkTlGECBGy1P7gk3bRY5re5rmbs+nYbtQZu+rAQ9k2jmOaax7QO1BgOxIk4S72brnIx5pMk2dOVCxrdc3oj5DgRBGbSpLjqgMtIQBFBkDT3cYNqY2eCRb8PKPt7xit+z2OEa9hTq5fiDYddwfws7qCKu88ndMFfUELYlHMYQUAJ5q0myAXJGqp7sRsfHLTdWoadTvjI5eqB3YPF23ZkQzb4Yqf3VH/ICaQxhiVHE8AHDEB5AIAbRHAKJBDC+JuYSKSzHLMG8deirW1pbmKuXqdSm/cMxc/KVH8GpCgPY7RNWqdEeAzjJjc3J19dhRNvs69hw2EPApZBJwI/cC75i/svKHw/PH7/kVLECl8Lae20oS3WC1Ulkq50v+rUy+JZtafdXcWO8q5Qsiz/NutVIrm86fcTeIW4f7aqnp2/DML/7MJTQyck2SpMh5RRHGfX55SFVDrCyLxLYt5NjeHQDyjWnaSJK4wQSfev/cGd3ji3c364sLH8Wu5n7eF7w7xsYmRYzFdp7HTKGgZW7enNpp1CS1r+VK18dv9omfn3znCkLhVqj+Pr1VS81fK25kvj01BdbTU7FXTE9PNa7Gpb3WBGt9QcuQFWvhuyR/4j1QekebwbvxKSKE1mzeeurx88Rt6odw0n7EZoX7gpUd9ENG4UOdiE++EUBu/tzVAS09frr26LnBjZifB/LTA3u5v51NYyPfF+IKIS7YgfhEnwJWtp9xjMx/Aj+JFtFJsYR/yFn5twJM3scFEghFewLlreLxFwL/lgHv+3n74ZkWdhHr2X7R3gwtZ/wojd+tvBD4SbRK9jKPuNXHWTgxVz5bz+nBr/8BY6vJZPw2PtcAAAAASUVORK5CYII=) !important;
}
.ui-icon-search:hover:after {
  background-color: transparent !important;
  border-radius: 0 !important;
}

/* jQM no frills */
.ui-btn, 
.ui-btn:hover,
.ui-btn:focus,  
.ui-btn:active,
.ui-btn:visited  {
    text-shadow: none !important;
}
.ui-focus,
.ui-btn:focus {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
/* speed-up some android  ans iOS devices */
* {
    -webkit-tap-highlight-color:rgba(0,0,0,0) !important;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="page-1">
    <div data-role="header" style="overflow:hidden;">
      <h1>Header</h1>
      <a href="#" class="ui-btn ui-btn-right ui-btn-inline ui-mini ui-corner-all ui-btn-icon-right ui-icon-search ui-btn-icon-notext ui-corner-all"></a>
      <div data-role="navbar" data-iconpos="right">
        <ul>
          <li><button data-icon="home">One</button></li>
          <li><button data-icon="grid" data-theme="b">Two</button></li>
          <li><button data-icon="search">Three</button></li>
        </ul>
      </div><!-- /navbar -->
    </div><!-- /header -->
    <div role="main" class="ui-content">
    </div>
  </div>
</body>

第三个也是最后一个例子：

我在这里使用自定义规则，备用样式（黑色和白色图标），22x22px svg图标＆amp; png作为后备，也在使用body class="ui-nosvg"的旧IE版本中进行了测试。

.ui-icon-search-custom {
  border-width: 0 !important;
  border-style: none !important;
  background-color: transparent !important;
}
.ui-icon-search-custom:after {
  margin-top: -9px !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}
/* white svg */
.ui-icon-search-custom:after {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjJweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjIgMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgIDxnIGlkPSJzZWFyY2giIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9InNlYXJjaCIgZmlsbD0iI2ZmZmZmZiI+ICAgICAgICAgICAgPGcgaWQ9InNlYXJjaCI+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS4yMzY0NDgsMTMuNDM5NTAyOCBMMTQuMjkwMDU2OSwxMy40Mzk1MDI4IEwxMy45NTQ2MjcxLDEzLjExNjA1MjcgQzE1LjEyODYzMTMsMTEuNzUwMzc0NCAxNS44MzU0Mjk4LDkuOTc3Mzg4NDQgMTUuODM1NDI5OCw4LjA0ODY2NzI3IEMxNS44MzU0Mjk4LDMuNzQ3OTc4NDQgMTIuMzQ5MzU2MSwwLjI2MTkwNDc2MiA4LjA0ODY2NzI3LDAuMjYxOTA0NzYyIEMzLjc0Nzk3ODQ0LDAuMjYxOTA0NzYyIDAuMjYxOTA0NzYyLDMuNzQ3OTc4NDQgMC4yNjE5MDQ3NjIsOC4wNDg2NjcyNyBDMC4yNjE5MDQ3NjIsMTIuMzQ5MzU2MSAzLjc0Nzk3ODQ0LDE1LjgzNTQyOTggOC4wNDg2NjcyNywxNS44MzU0Mjk4IEM5Ljk3NzM4ODQ0LDE1LjgzNTQyOTggMTEuNzUwMzc0NCwxNS4xMjg2MzEzIDEzLjExNjA1MjcsMTMuOTU0NjI3MSBMMTMuNDM5NTAyOCwxNC4yOTAwNTY5IEwxMy40Mzk1MDI4LDE1LjIzNjQ0OCBMMTkuNDI5MzIwMiwyMS4yMTQyODU3IEwyMS4yMTQyODU3LDE5LjQyOTMyMDIgTDE1LjIzNjQ0OCwxMy40Mzk1MDI4IEwxNS4yMzY0NDgsMTMuNDM5NTAyOCBaIE04LjA0ODY2NzI3LDEzLjQzOTUwMjggQzUuMDY1NzM4MjQsMTMuNDM5NTAyOCAyLjY1NzgzMTY5LDExLjAzMTU5NjMgMi42NTc4MzE2OSw4LjA0ODY2NzI3IEMyLjY1NzgzMTY5LDUuMDY1NzM4MjQgNS4wNjU3MzgyNCwyLjY1NzgzMTY5IDguMDQ4NjY3MjcsMi42NTc4MzE2OSBDMTEuMDMxNTk2MywyLjY1NzgzMTY5IDEzLjQzOTUwMjgsNS4wNjU3MzgyNCAxMy40Mzk1MDI4LDguMDQ4NjY3MjcgQzEzLjQzOTUwMjgsMTEuMDMxNTk2MyAxMS4wMzE1OTYzLDEzLjQzOTUwMjggOC4wNDg2NjcyNywxMy40Mzk1MDI4IEw4LjA0ODY2NzI3LDEzLjQzOTUwMjggWiIgaWQ9IlNoYXBlIi8+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+) !important;
}
/* black svg */
.ui-alt-icon.ui-icon-search-custom:after {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iMjJweCIgaGVpZ2h0PSIyMnB4IiB2aWV3Qm94PSIwIDAgMjIgMjIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+ICAgIDxnIGlkPSJzZWFyY2giIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9InNlYXJjaCIgZmlsbD0iIzAwMDAwMCI+ICAgICAgICAgICAgPGcgaWQ9InNlYXJjaCI+ICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNS4yMzY0NDgsMTMuNDM5NTAyOCBMMTQuMjkwMDU2OSwxMy40Mzk1MDI4IEwxMy45NTQ2MjcxLDEzLjExNjA1MjcgQzE1LjEyODYzMTMsMTEuNzUwMzc0NCAxNS44MzU0Mjk4LDkuOTc3Mzg4NDQgMTUuODM1NDI5OCw4LjA0ODY2NzI3IEMxNS44MzU0Mjk4LDMuNzQ3OTc4NDQgMTIuMzQ5MzU2MSwwLjI2MTkwNDc2MiA4LjA0ODY2NzI3LDAuMjYxOTA0NzYyIEMzLjc0Nzk3ODQ0LDAuMjYxOTA0NzYyIDAuMjYxOTA0NzYyLDMuNzQ3OTc4NDQgMC4yNjE5MDQ3NjIsOC4wNDg2NjcyNyBDMC4yNjE5MDQ3NjIsMTIuMzQ5MzU2MSAzLjc0Nzk3ODQ0LDE1LjgzNTQyOTggOC4wNDg2NjcyNywxNS44MzU0Mjk4IEM5Ljk3NzM4ODQ0LDE1LjgzNTQyOTggMTEuNzUwMzc0NCwxNS4xMjg2MzEzIDEzLjExNjA1MjcsMTMuOTU0NjI3MSBMMTMuNDM5NTAyOCwxNC4yOTAwNTY5IEwxMy40Mzk1MDI4LDE1LjIzNjQ0OCBMMTkuNDI5MzIwMiwyMS4yMTQyODU3IEwyMS4yMTQyODU3LDE5LjQyOTMyMDIgTDE1LjIzNjQ0OCwxMy40Mzk1MDI4IEwxNS4yMzY0NDgsMTMuNDM5NTAyOCBaIE04LjA0ODY2NzI3LDEzLjQzOTUwMjggQzUuMDY1NzM4MjQsMTMuNDM5NTAyOCAyLjY1NzgzMTY5LDExLjAzMTU5NjMgMi42NTc4MzE2OSw4LjA0ODY2NzI3IEMyLjY1NzgzMTY5LDUuMDY1NzM4MjQgNS4wNjU3MzgyNCwyLjY1NzgzMTY5IDguMDQ4NjY3MjcsMi42NTc4MzE2OSBDMTEuMDMxNTk2MywyLjY1NzgzMTY5IDEzLjQzOTUwMjgsNS4wNjU3MzgyNCAxMy40Mzk1MDI4LDguMDQ4NjY3MjcgQzEzLjQzOTUwMjgsMTEuMDMxNTk2MyAxMS4wMzE1OTYzLDEzLjQzOTUwMjggOC4wNDg2NjcyNywxMy40Mzk1MDI4IEw4LjA0ODY2NzI3LDEzLjQzOTUwMjggWiIgaWQ9IlNoYXBlIi8+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+) !important;
}
/* white png */
.ui-nosvg .ui-icon-search-custom:after {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAB3RJTUUH4QMDFxQEdHMRAAAAAAlwSFlzAABOIAAATiABFn2Z3gAAAARnQU1BAACxjwv8YQUAAAGCSURBVHjarZQ9S8RAEIY3EkQ7sRP8AYJXCIqcqK16YGFxhYoI4imCjYXgj7C0FGwUGwWL622vUFC5E7GSOz+ukhNEBBXiO2RWpths5iQDD9kkkye7m5kExhFRFOVwGALDIAQ34BLUgiD4Me0GhGPgIEqOM1BoVzoHWkLyDa7ABfgU12m8oZX2C+k72AZd4n4I5kFTvDSvEZeFdMCT1wMeOPdOvtyVPCqWuaOYxCL44PzlpLwOkOPxKzhME6Mqjk1cJUY86xVTKb2oPooxVY24k8dfSqnM7faJb+3bsWe9SvEgH+994gqP+8BUmpGrZtJuny8x5EageKSSSsmtcG7Tl2sfKIAGP3BOJeXImQYnojQ3VZuGxC3uKBtVsA/2uK3lPYpdMKOV57mjkoKWv8RS29pFlytwyKlNZ8E4GAF0fm3ipjhCrb/xTMsm/qXSb3QB109Vs1esbgXUxUcvZSJm+SpLKZ7AWpbyEkspnsF6lvKiqJpWan3/Q07SicykQv4301/GcuwCIWGRcwAAAABJRU5ErkJggg==") !important;
}
/* black png */
.ui-nosvg .ui-alt-icon.ui-icon-search-custom:after {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAMAAADzapwJAAAA5FBMVEUAAABAQEAgICAgICArKysnJyckJCQmJiYjIyMlJSUmJiYkJCQoKCgmJiYoKCgnJycmJiYmJiYkJCQmJiYlJSUnJycmJiYlJSUnJycnJycmJiYmJiYmJiYlJSUnJycmJiYmJiYnJyclJSUnJycnJycnJycmJiYlJSUmJiYmJiYnJycmJiYmJiYlJSUlJSUmJiYmJiYmJiYmJiYmJiYnJycnJycmJiYlJSUmJiYmJiYmJiYlJSUmJiYmJiYnJycmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYnJycmJiYmJiYmJiYCMz21AAAAS3RSTlMABAgQEhocKCwwNjg5PEdISVBUWFpcXmFiY2RlZmhpa2xwdHeKi46Pk5SYmZueq6+ztrq+v8DDxsfLz9PX3+Hi4+Tl5ufs7/P19/sf9UMeAAAA0klEQVR42m3IazcCURhA4XfmIAllKpdxi0qDXHObhIkx6ez//38svM1krbM/7fXIb8vNXhSWPfnX6gUAXNXmdSMDO4ynMN0vdCljcuyLePUUW8n5mknp78wLI191BdqiNb7Y1N3mc1FmPdLRO+Fe8s650TvltuCIO70DPhZyHnCmV4b6TEuWlq43JDG6T6RGtNobg8bPrF/CoeQdWXjuR7EFutXCKyMASJtdbFC4H/Qe4n7LSNUWPt/WK0no8J2E8a7DwzHvew4PLJlxebYmrozIN8tDIYS624DnAAAAAElFTkSuQmCC) !important;
}
/* Show me the tap */
.ui-icon-search-custom:active:after {
  filter: invert(100%);
  -webkit-filter: invert(100%);
}
/* jQM no frills */
.ui-btn,
.ui-btn:hover,
.ui-btn:focus,
.ui-btn:active,
.ui-btn:visited {
  text-shadow: none !important;
}
.ui-focus,
.ui-btn:focus {
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
/* speed-up some android  ans iOS devices */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
  <div data-role="page" id="page-1">
    <div data-role="header">
      <a href="#" class="ui-btn ui-btn-inline ui-icon-search-custom ui-btn-icon-notext ui-btn-left"></a>
      <h1>Header</h1>
      <a href="#" class="ui-btn ui-btn-inline ui-alt-icon ui-icon-search-custom ui-btn-icon-notext ui-btn-right"></a>
    </div>
    <div role="main" class="ui-content">
    </div>
  </div>
</body>

答案 1 :(得分：0)

试试这个

.ui-icon-search { 
  background:
    transparent 
    url('images/search.png')
    50% 50% no-repeat!important;
    border: none;
}

答案 2 :(得分：0)

试试这个：

<a href='@Url.Action("Search", "Home")' data-shadow="false" data-theme="none"><img src="images/imagefile.png" border="0"/></a>

不需要额外的CSS，但请确保您拥有正确的图标大小。

答案 3 :(得分：0)

由于您使用的是 jQuery UI Mobile ，因此您需要使用ui-icon-search:after从background-image中删除搜索图标。您还要删除 JQM 使用的border，border-radius和:hover。

CSS 

body .ui-icon-search { 
  background: url('images/search.png') 50% 50% no-repeat; /* Set Your Image */
  padding: 0; /* Remove Padding */
  border: none; /* Remove Border */
  border-radius: 0; /* Remove Border Radius */
  background-size: contain; /* Contain Background Image */
}
body .ui-page-theme-a .ui-btn:hover {
  background-color: inherit; /* Remove Hover Color */
}
body .ui-icon-search:after {
  display: none; /* Remove Default Search Icon */
}

您注意到我没有使用!important，因为我使用specificity使用body代码定位CSS。

以下是使用 jQuery UI Mobile 1.4.5 的working example以及上面的CSS代码，以获得您想要的结果。

旧结果

Old Search

新结果

New Search

显然我提供的example没有使用您最终会使用的确切图像，但它应该可以正常工作。您随时可以更改height的{​​{1}}和width以更好地适应您的图标。

相关问题
最新问题