Отключить выделение оранжевого контура на фокусе - PullRequest
104 голосов
/ 06 марта 2011

Я кодирую приложение, используя 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, похоже, не работает ни в одном из браузеров.

Ответы [ 16 ]

209 голосов
/ 02 апреля 2011

Попробуйте:

-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-webkit-tap-highlight-color: transparent;  // i.e. Nexus5/Chrome and Kindle Fire HD 7''
35 голосов
/ 17 июня 2012
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
} 

в вашем файле CSS. У меня это сработало!

34 голосов
/ 21 июля 2013

Работа на 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;
} 
18 голосов
/ 06 ноября 2012

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

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

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

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

13 голосов
/ 08 мая 2012

Попробуйте для Focus Line

body, textarea:focus, input:focus{
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
10 голосов
/ 20 февраля 2013

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

7 голосов
/ 21 февраля 2013

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

Не работает:
-webkit-user-modify: только для чтения-записи-открытого текста;
// При нажатии на элемент

иногда всплывает собственная клавиатура.

.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. Поэтому не определяют его для состояний только для самого элемента .

5 голосов
/ 16 сентября 2013

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

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

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

2 голосов
/ 20 июля 2013

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

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

По моему опыту, это быстрееподход к *, но это также подход к менее странным ошибкам. Комбинация tap-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;
}
2 голосов
/ 08 марта 2013

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

с JQuery:

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