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

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

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

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

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

 .class_id:focus { outline: none; } 

Это работает в Chrome, но не на эмуляторе или на моем телефоне. Я также попытался отредактировать тему 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; // ie Nexus5/Chrome and Kindle Fire HD 7'' 
 * { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 

в вашем файле css. Это сработало для меня!

Работа над 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; } 

Удалите оранжевую рамку с фокусом ввода для андроидов

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

цвет выделения для большинства версий

user-modify для 4.0.4

Попробуйте использовать Focus Line

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

Имейте в -webkit-user-modify: read-write-plaintext-only; что использование этого CSS -webkit-user-modify: read-write-plaintext-only; УБИВАЕТ эту ужасную ошибку «ошибка» – НО она может убить ваши устройства, чтобы обеспечить определенную клавиатуру. Для нас, работающих под управлением Android 4.0.3 на вкладке Samsung Tab 2, мы больше не могли получить цифровую клавиатуру. Даже используя type = ‘number’ & / или type = ‘tel’. Очень расстраивает! BTW, установив цвет выделения подсветки, не помогло решить эту проблему для этого устройства и конфигурации ОС. Мы используем Safari для Android.

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

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

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

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

Этот случай работает для Android от версии 2.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’s Reset CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) и добавить его в мой проект phonegap. Затем я добавил:

 -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: –

  

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

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

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

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

схема: нет! важно;

Давайте будем гением компьютера.