Allow ui-icon background to be used_问答_开发者

开发者 https://www.devze.com 2023-04-03 15:17 出处：网络

We\'ve got a site wide style sheet that\'s setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associ

相关专题：css jquery-ui

We've got a site wide style sheet that's setting the background on a:link to transparent. This is causing a problem displaying the icons from jqueryui. In the example below the trash can icon associated with the ui-icon-trash CSS class is not being dis开发者_如何学Goplayed because the a:link background property overrules it.

I could apply the same styles ui-icon-trash uses to the link in question but that will be fragile if the jqueryui theme were ever to be updated in the future. Is there a way I can get the jqueryio icons to display at the same time as having a site wide background:transparent property on a:link?

<html>
  <head>
 <link rel="stylesheet" type="text/css" href="jquery-ui.css" />
 <style>
   a:link {
    text-decoration: underline;
    color: #066E37;
    background: transparent;
    } 
  </style>
   </head>
   <body>
     <a class="ui-icon ui-icon-trash" href="#"></a>
    </body>
 </html>

I don't see a real solution there, but I can offer two hacks:

Put an additional <span> inside the <a> and apply the css to this element.
Don't use <a> but <button> instead. Drawback: this would require additional javascript to make the button work.

If it is sufficient to override only the background color of your links, background-color: transparent instead of background: transparent could do the trick (but I guess you might have thought of that already).