초점에 주황색 윤곽선 강조 표시 비활성화

초점에 주황색 윤곽선 강조 표시 비활성화

---

jQuery, jqTouch 및 phonegap을 사용하여 앱을 코딩하고 있으며 사용자가 소프트 키보드의 Go 버튼을 사용하여 양식을 제출할 때 발생하는 지속적인 문제를 겪었습니다.

를 사용하면 커서를 적절한 양식 입력 요소로 쉽게 이동할 수 있지만 $('#input_element_id').focus()주황색 윤곽선 강조 표시는 항상 양식의 마지막 입력 요소로 돌아갑니다. (양식 제출 버튼을 사용하여 양식을 제출하면 강조 표시되지 않습니다.)

내가 필요한 것은 주황색 강조 표시를 완전히 비활성화하거나 커서와 동일한 입력 요소로 이동하는 방법을 찾는 것입니다.

지금까지 CSS에 다음을 추가해 보았습니다.

.class_id:focus {
    outline: none;
}

이것은 Chrome에서 작동하지만 에뮬레이터 또는 내 휴대 전화에서는 작동하지 않습니다. 또한 theme.css읽기 위해 jqTouch 편집을 시도했습니다 .

ul li input[type="text"] {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); and
    -webkit-focus-ring-color:  rgba(0, 0, 0, 0);
}

효과가 없습니다. 또한 AndroidManifest.xml파일에 다음 추가 사항을 각각 시도했습니다 .

android:imeOptions="actionNone"
android:imeOptions="actionSend|flagNoEnterAction"
android:imeOptions="actionGo|flagNoEnterAction"

어느 것도 효과가 없습니다.

업데이트 : 나는 이것으로 더 많은 문제 해결을 수행했으며 현재까지 발견했습니다.

1. outline 속성은 Android 브라우저가 아닌 Chrome에서만 작동합니다.

2. 이 -webkit-tap-highlight-color속성은 실제로 Android 브라우저에서는 작동하지만 Chrome에서는 작동하지 않습니다. 두드리기뿐만 아니라 초점에 대한 강조 표시를 비활성화합니다.

3. -webkit-focus-ring-color속성은 두 브라우저에서 작동하지 않습니다.

---

시험:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''

---

Android Default, Android Chrome 및 iOS Safari에서 100 % 작업

* {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0) !important; 
    -webkit-focus-ring-color: rgba(255, 255, 255, 0) !important; 
    outline: none !important;
} 

---

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

css 파일에 있습니다. 그것은 나를 위해 일했습니다!

---

Android의 입력 포커스에서 주황색 상자 제거

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

대부분의 버전에 대한 탭 강조 색상

4.0.4 용 사용자 수정

---

Focus Line 시도

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

---

이 CSS를 사용하면 -webkit-user-modify: read-write-plaintext-only;끔찍한 하이라이트 '버그'가 제거되지만 특정 키보드를 제공하는 장치 기능이 중단 될 수 있습니다. Samsung Tab 2에서 Android 4.0.3을 실행하는 경우 더 이상 숫자 키보드를 얻을 수 없습니다. type = 'number'& / 또는 type = 'tel'을 사용해도. 매우 실망 스럽습니다! BTW, 탭 강조 색상을 설정해도이 장치 및 OS 구성에 대해이 문제가 해결되지 않았습니다. Android 용 Safari를 실행하고 있습니다.

---

tap-highlight-color속성 재정의가 제대로 작동 하는지 확인하려면 먼저 다음 사항을 고려하세요.

작동하지 않음 :
-webkit-user-modify : read-write-plaintext-only;
// 요소를 클릭 할 때 가끔 기본 키보드가 팝업되도록 트리거합니다.

.class:active, .class:focus { -webkit-tap-highlight-color: rgba(0,0,0,0); }
// It's not working if defined for states

Working:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

This case works for Android from v2.3 to v4.x even in a PhongeGap application. I tested it on Galaxy Y with Android 2.3.3, on Nexus 4 with Android 4.2.2 and on Galaxy Note 2 with Android 4.1.2. So don't define it for states only for the element itself.

---

Use the below code in CSS file

  * {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    :focus {
        outline: 0;
        border:none;
        color: rgba(0, 0, 0, 0);
    }

It's work for me. I hope it work for you.

---

This didn't work for me on Image Map Area links, the only working solution was to use javascript by capturing the ontouchend event and preventing default browser behavior by returning false on the handler.

with jQuery:

$("map area").on("touchend", function() {
   return false;
});

---

I just wanted to share my experience. I didn't really get this to work, and I wanted to avoid the slow css-*. My solution was to download good old Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) and add this one to my phonegap project. I then added:

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */

In my experience this is a faster approach to the *, but it is also an approach to less weird bugs. Combination of tap-highlight, -webkit-user-modify: read-write-plaintext-only and disabling of for example text highlighting have provided us with a lot of headaces. One of the worst being that suddenly keyboard input stops working and slow keyboard visualization.

Complete CSS-reset with the orange highlight disabled:

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);   /** Disable orange highlight */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

---

I have tried this one and worked fine :-

HTML:-

<a class="html5logo"  href="javascript:void(0);"  ontouchstart="return true;"></a>

css

.html5logo {
  display: block;
  width: 128px;
  height: 128px;
  background: url(/img/html5-badge-128.png) no-repeat;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-tap-highlight-color: transparent; /* For some Androids */
}
.html5logo:active {
  -webkit-transform: scale3d(0.9, 0.9, 1);
}

---

This will work not only for taps, but hover as well:

button, button:hover, li:hover, a:hover , li , a , *:hover, * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

---

This work for me in Ionic, just put in CSS file to overwrite

:focus {
    outline-width: 0px;
}

---

If the design doesn't use outlines, this should do the job:

*, *::active, *::focus {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
    -webkit-focus-ring-color: rgba(0, 0, 0, 0)!important;
    outline: none!important;
}

---

<EditText
            android:id="@+id/edittext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"  
            android:background="@android:drawable/editbox_background_normal"                 

 />

---

Try following code that disable border outline

outline: none !important;

참고URL : https://stackoverflow.com/questions/5210481/disable-orange-outline-highlight-on-focus