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:
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
Post a Comment