Remove selection gray shadow from html input on iOS

匿名 (未验证) 提交于 2019-12-03 03:03:02

问题:

I'm currently working on html rich text editor for my iOS application,so,the setup is simple,i have a UIWebView loading my editor code,the html input is a 'contentEditable' DIV.

The problem is that every time i select this div to enter some text,a light gray frame appears on the input frame,telling the user that the textfield has been selected.

NOTE:You can see the effect in this quick video

My question is:How to remove this light gray frame?

My html file is bellow:

<html>  <head>      <style type="text/css">          :focus{              outline:0px solid transparent;          }          DIV::-moz-focus-inner {             background-color:#ff0000;             border: 0;             padding: 0;         }          ul{             margin-left:-10px;         }         ol{             margin-left:-10px;         }          blockquote {              border-left:#ff0000 5px double;             margin-left:0px;          }      </style>  </head>  <body onload="addImgAttributes();checkBlockquote();" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0">      <div         id="content"         class="content"         contenteditable="true"         style="font-family: Helvetica; background-color:#fff; color:#000; height:258px;"         autocapitalize="off"         autocorrect="off"         autocomplete="off"         spellCheck="false"     >     </div>  </body>  </html> 

//------------------------------------------------------------------------------------------------------------------ EDIT 1 -----

After the comment of @StephenJ i realized that this gray frame might be a subview of the UIWebView and not a css property.I logged the view hierarchy from the UIWebView in the exact moment that the frame appeared,this is the log:

2013-04-17 21:37:00.919 StrangeThings[1182:c07] <UIWebView: 0xa5ec3f0; frame = (7 7; 306 258); layer = <CALayer: 0xa5edf30>> 2013-04-17 21:37:00.919 StrangeThings[1182:c07] <_UIWebViewScrollView: 0xa5f7850; frame = (0 0; 306 258); clipsToBounds = YES; autoresize = H; gestureRecognizers = <NSArray: 0xa5f7e20>; layer = <CALayer: 0xa5f7aa0>; contentOffset: {0, 0}> 2013-04-17 21:37:00.920 StrangeThings[1182:c07] <UIImageView: 0xa5f90c0; frame = (0 0; 54 54); transform = [-1, 0, -0, -1, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f9120>> 2013-04-17 21:37:00.920 StrangeThings[1182:c07] <UIImageView: 0xa5f9030; frame = (0 0; 54 54); transform = [0, 1, -1, 0, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f9090>> 2013-04-17 21:37:00.920 StrangeThings[1182:c07] <UIImageView: 0xa5f8fa0; frame = (0 0; 54 54); transform = [0, -1, 1, 0, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f9000>> 2013-04-17 21:37:00.921 StrangeThings[1182:c07] <UIImageView: 0xa5f8b90; frame = (0 0; 54 54); alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8f70>> 2013-04-17 21:37:00.921 StrangeThings[1182:c07] <UIImageView: 0xa5f8b00; frame = (-14.5 14.5; 30 1); transform = [0, 1, -1, 0, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8b60>> 2013-04-17 21:37:00.922 StrangeThings[1182:c07] <UIImageView: 0xa5f8a70; frame = (-14.5 14.5; 30 1); transform = [0, -1, 1, 0, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8ad0>> 2013-04-17 21:37:00.922 StrangeThings[1182:c07] <UIImageView: 0xa5f89e0; frame = (0 0; 1 30); transform = [-1, 0, -0, -1, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8a40>> 2013-04-17 21:37:00.922 StrangeThings[1182:c07] <UIImageView: 0xa5f8950; frame = (0 0; 1 30); alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f89b0>> 2013-04-17 21:37:00.923 StrangeThings[1182:c07] <UIImageView: 0xa5f88c0; frame = (0 228; 306 30); alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8920>> 2013-04-17 21:37:00.923 StrangeThings[1182:c07] <UIImageView: 0xa5f8750; frame = (0 0; 306 30); transform = [-1, 0, -0, -1, 0, 0]; alpha = 0; opaque = NO; userInteractionEnabled = NO; layer = <CALayer: 0xa5f8630>> 2013-04-17 21:37:00.924 StrangeThings[1182:c07] <UIWebBrowserView: 0xc270400; frame = (0 0; 306 258); text = ''; gestureRecognizers = <NSArray: 0xa5f5ac0>; layer = <UIWebLayer: 0xa5f0820>> 2013-04-17 21:37:00.925 StrangeThings[1182:c07] <UIHighlightView: 0xa5ef210; frame = (-4 -4; 314 266); opaque = NO; layer = <CALayer: 0xa5c0730>> 2013-04-17 21:37:00.925 StrangeThings[1182:c07] <UIImageView: 0xa0bebc0; frame = (0 251; 306 7); alpha = 0; opaque = NO; autoresize = TM; userInteractionEnabled = NO; layer = <CALayer: 0xa0bec60>> 2013-04-17 21:37:00.925 StrangeThings[1182:c07] <UIImageView: 0xa0b37d0; frame = (299 0; 7 258); alpha = 0; opaque = NO; autoresize = LM; userInteractionEnabled = NO; layer = <CALayer: 0xa0becd0>> 

After analyzing all these subviews i found one named UIHighlightView,as the name confirm,this view might highlighting the webView.So my second question is:How to remove this view?

回答1:

It's as simple as setting the following CSS rule.

div {     -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 

This makes the applied shadow transparent so it seems like it's gone.

Edit: Here's a demo link.



标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!