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

Question

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

Хотя это легко получитьПри перемещении курсора на соответствующий элемент ввода формы с помощью $('#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. Свойство outline работает только в Chrome, но не в браузере Android.

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

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

Answer 1

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

:focus {
    outline-width: 0px;
}

Answer 2

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

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

Answer 3

Это будет работать не только для метчиков, но и для парения:

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

Answer 4

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

контур: нет! Важный;

Answer 5

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

 />

Answer 6

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

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