ios - UIWebview: How to place an icon before a html link and highlight both on tap -


in ios uiwebview have problem, need prefix standalone links located in locally loaded html file icon. both must highlighted when tap link. icon should highlighted replacing non-active version active one. result should like:

link prefixed arrow icon

luckily found working solution:

html

<a href="http://www.google.de" class="standalone-link">   <div class="standalone_link_background">     <div class="standalone_link_icon">         <div class="standalone_link_text">google</div>     </div>   </div>; </a> 

css

/* unvisited, visited, mouse over, selected link */ a, a:link, a:visited, a:hover {     color:                          #00f;     -webkit-tap-highlight-color:    rgba(0, 0, 0, 0); /* disable gray flash in webview */     -webkit-touch-callout: none; }  a:active {     color:                          #f00;     -webkit-tap-highlight-color:    rgba(0, 0, 0, 0); /* disable gray flash in webview */     -webkit-touch-callout: none; }  a.standalone-link, a.standalone-link:link, a.standalone-link:visited, a.standalone-link:hover {     color:                          #ffffff;     -webkit-tap-highlight-color:    rgba(0, 0, 0, 0); /* disable gray flash in webview */     -webkit-touch-callout: none; }  a.standalone-link:active {     color:                          #f00;     -webkit-tap-highlight-color:    rgba(0, 0, 0, 0); /* disable gray flash in webview */     -webkit-touch-callout: none; }  div.standalone_link_icon {     background:                     url('link_icon.png') no-repeat left;     width:                          20pt; /* big okay arrow not cut fro right side */     height:                         12pt; /* set height of icon */ }  div.standalone_link_icon:active {     background:                     url('link_icon_highlight.png') no-repeat left; }  div.standalone_link_text {     margin-left:                    14pt;     width:                          9999pt; /* standalone links shouldn't wider display width */     float:                          left; }  div.standalone_link_background {     background-color:               rgba(0, 0, 0, 0);     clear:                          left; } 

can done shorter or somehow better? comments , improvements appreciated ;-)


Comments