Вимкніть помаранчевий контур підкреслення

Я кодую програму за допомогою 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. Це працювало на мене!

Видаліть помаранчеве поле на фокусі входу для андроїдів

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

колір-підкреслити колір для більшості версій

користувача-модифікувати для 4.0.4

Спробуйте для фокус-лінії

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'. Дуже засмучує! BTW, встановивши колір виділення крана, нічого не вирішив цю проблему для цього пристрою та конфігурації ОС. Ми запускаємо Safari для android.

Щоб переконатися, що перегляд tap-highlight-colorвластивості працює для вас, спочатку врахуйте ці речі:

Не працює:
-webkit-user-modify: read-write-plaintext-only;
// Іноді він запускає натиснуту клавіатуру на нативної клавіатури

.class: active, .class: focus {-webkit-tap -light-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);
    }

Це для мене робота. Я сподіваюся, що це працює для вас.

Це не спрацювало для мене на посиланнях на область зображень Map Map, єдиним робочим рішенням було використання JavaScript, захоплюючи подію ontouchend та запобігаючи поведінці браузера за замовчуванням, повертаючи false на обробник.

з jQuery:

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

Я просто хотів поділитися своїм досвідом. Я не дуже працював над цим, і хотів уникнути повільного css- *. Моє рішення полягало в тому, щоб завантажити старий хороший Ерік Мейєр Скинути CSS v2.0 ( http://meyerweb.com/eric/tools/css/reset/ ) і додати його до мого проекту fonegap. Потім я додав:

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

Спробуйте наступний код, який відключає контур кордону

контур: немає! важливо;