Отключить выделение оранжевого контура при фокусе

Я кодирую приложение, используя jQuery, jqTouch и phonegap, и столкнулся с постоянной проблемой, которая возникает, когда пользователь отправляет форму с помощью кнопки Go на виртуальной клавиатуре.

Хотя легко заставить курсор переместиться к соответствующему элементу ввода формы с помощью $('#input_element_id').focus(), выделение оранжевого контура всегда возвращается к последнему элементу ввода в форме. (Выделение не отображается, когда форма отправляется с помощью кнопки отправки формы.)

Мне нужно найти способ либо полностью отключить оранжевую подсветку, либо переместить ее в тот же элемент ввода, что и курсор.

До сих пор я пытался добавить в свой CSS следующее:

.class_id:focus {
    outline: none;
}

Это работает в Chrome, но не в эмуляторе или на моем телефоне. Я также попытался отредактировать jqTouch, theme.cssчтобы прочитать:

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. Свойство схемы работает только в Chrome, но не в браузере Android.

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 по умолчанию, 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;устранит эту ужасную «ошибку» выделения - НО это может убить способность ваших устройств предоставлять определенную клавиатуру. Для нас, использующих Android 4.0.3 на Samsung Tab 2, мы больше не могли получить цифровую клавиатуру. Даже при использовании type = 'number' и / или type = 'tel'. Очень неприятно! Кстати, настройка цвета подсветки касания не решила эту проблему для этого устройства и конфигурации ОС. Мы запускаем Safari для Android.

Чтобы убедиться, что tap-highlight-colorпереопределение свойств работает для вас, сначала учтите следующие моменты:

Не работает:
-webkit-user-modify: read-write-plaintext-only;
// Иногда при нажатии на элемент появляется всплывающая клавиатура.

.class: активный, .class: focus {-webkit-tap-highlight-color: rgba (0,0,0,0); }
// Не работает, если определено для состояний

Работает:
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

Этот случай работает для Android от v2.3 до v4.x даже в приложении PhongeGap. Я тестировал его на Galaxy Y с Android 2.3.3, на Nexus 4 с Android 4.2.2 и на Galaxy Note 2 с Android 4.1.2. Поэтому не определяйте его для состояний только для самого элемента .

Используйте приведенный ниже код в файле CSS

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

Для меня это работа. Надеюсь, это сработает для вас.

Это не сработало для меня со ссылками на область карты изображений, единственным работающим решением было использование javascript, захватывая событие ontouchend и предотвращая поведение браузера по умолчанию, возвращая false в обработчике.

с jQuery:

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

Я просто хотел поделиться своим опытом. Я действительно не заставил это работать, и я хотел избежать медленного css- *. Мое решение заключалось в том, чтобы загрузить старый добрый Eric Meyer Reset CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) и добавить его в мой проект телефонной связи. Затем я добавил:

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

По моему опыту, это более быстрый подход к *, но это также подход к менее странным ошибкам. Комбинация выделения по нажатию, -webkit-user-modify: read-write-plaintext-only и отключение, например, выделения текста, дала нам много головных болей. Одна из худших - внезапно перестает работать ввод с клавиатуры и замедляется визуализация клавиатуры.

Полный сброс CSS с отключенной оранжевой подсветкой:

/**
 * 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;
}

Я пробовал это и отлично работал: -

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);
}

Это будет работать не только для нажатий, но и для наведения:

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

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

 />

Эта работа для меня в Ionic, просто вставьте файл CSS, чтобы перезаписать

:focus {
    outline-width: 0px;
}

Если в дизайне не используются контуры, это должно сработать:

*, *::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;
}

Попробуйте следующий код, который отключает контур границы

наброски: нет! важно;