CODEWITHSUNDEEP
cssbuttonjquery-mobile
NoWar
NoWar

Reputation: 37633

jQuery mobile 1.4.5 and custom button image

I need to use custom png instead of default search icon of jQuery mobile.

The code I have for default button is following 

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

I try to redefine the CSS like this

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

I see the image but cannot get rid of the theme CSS design.

enter image description here

UPDATE #1

I used CSS of the user deblocker and it looks like

enter image description here

Upvotes: 1

Views: 1564

Answers (4)

Matthew Beckman
Matthew Beckman

Reputation: 1722

Since you are using jQuery UI Mobile, you'll need to remove the search icon from ui-icon-search:after using background-image. You'll also want to remove the border, border-radius, and :hover that JQM uses.

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 */
}

You'll notice I don't use !important because I'm using specificity to target the CSS using the body tag.

Here is a working example that's using jQuery UI Mobile 1.4.5, and the CSS code above to get the results you wanted.

Old Result

Old Search

New Result

New Search

Obviously the example I provided is not using the exact image you would end up using, but it should work just fine. You can always change the height and width of ui-icon-search to fit your icon better.

Upvotes: 0

user5364144
user5364144

Reputation:

Try this:

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

No additional CSS needed, but make sure, that you have right icon size.

Upvotes: 0

deblocker
deblocker

Reputation: 7697

JQM is using the ::after pseudo-selector for button icons.

First example:

I'm not able to understand the size of your icon, so i'm using in this example a bigger one, 32x32px icon to show how to change also the appearance of the container button.

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

Second example:

From your edit it seems you need a standard 22x22px button inside a Toolbar or Navbar, so the CSS is even simpler.

Moreover i added some JQM no-frills rules (Some credits codaniel from this answer: JQuery Mobile: how to not display the button focus halo when a button is clicked?, see also this great post from Omar: How to remove the blue halo glow from jQuery Mobile input elements that receive focus.

Feel free to check it out, IMHO it will be a somewhat cleaner, mobile-friendly look.

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

Third and last example:

I'm using here a custom rule, alternate styles (black & white icons), 22x22px svg icons & png as fallback, tested also in older IE versions with body class="ui-nosvg".

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

Upvotes: 3

grinmax
grinmax

Reputation: 1855

Try this

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

Upvotes: 0

Related Questions