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

Я кодирую приложение с помощью 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"

Ни один из них не имеет никакого эффекта.

Обновление: я сделал еще несколько проблем с этим и до сих пор нашел:

  • Свойство контура работает только в Chrome, а не в браузере Android.

  • Свойство -webkit-tap-highlight-color действительно работает в браузере Android, но не в Chrome. Он отключает подсветку как при фокусировке, так и при нажатии.

  • Свойство -webkit-focus-ring-color, похоже, не работает в любом браузере.

ОТВЕТЫ

Ответ 1

Try:

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

Ответ 2

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

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

Ответ 3

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

Ответ 4

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

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

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

изменить пользователь для 4.0.4

Ответ 5

Попробуйте выполнить фокусировку

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

Ответ 6

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

Ответ 7

Чтобы убедиться, что переопределение свойств 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 от версии 3.2 до v4.x даже в приложении PhongeGap. Я тестировал его на Galaxy Y с Android 2.3.3, на Nexus 4 с Android 4.2.2 и на Galaxy Note 2 с Android 4.1.2. Поэтому не определять его для состояний только для самого элемента.

Ответ 8

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

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

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

Ответ 9

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

с jQuery:

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

Ответ 10

Я просто хотел поделиться своим опытом. Я действительно не получал это, чтобы работать, и я хотел избежать медленного css- *. Моим решением было загрузить старый добрый Эрик Мейер 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- reset с отключенной оранжевой подсветкой:

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

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

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

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

Ответ 14

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

 />

Ответ 15

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

:focus {
    outline-width: 0px;
}

Ответ 16

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

контур: none! important;