フォーカスのオレンジ色のアウトラインハイライトを無効にする

jQuery、jqTouch、phonegapを使用してアプリをコーディングしていて、ユーザーがソフトキーボードの[移動]ボタンを使用してフォームを送信すると発生する永続的な問題に遭遇しました。

を使用してカーソルを適切なフォーム入力要素に移動するのは簡単ですが$('#input_element_id').focus()、オレンジ色のアウトラインのハイライトは常にフォームの最後の入力要素に戻ります。（フォーム送信ボタンを使用してフォームを送信した場合、ハイライトは表示されません。）

オレンジ色のハイライトを完全に無効にするか、カーソルと同じ入力要素に移動する方法を見つける必要があります。

これまでのところ、CSSに以下を追加してみました。

.class_id:focus {
    outline: none;
}

これはChromeでは機能しますが、エミュレータや私の電話では機能しません。私もtheme.css読むためにjqTouch を編集してみました：

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プロパティは、どちらかのブラウザ上で動作するようには思えません。

試してください：

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

Android Default、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ファイルで。それは私のために働いた！

Androidの入力フォーカスのオレンジ色のボックスを削除します

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;すると、その恐ろしいハイライト「バグ」が削除されることに注意してください。ただし、特定のキーボードを提供するデバイスの機能が停止する可能性があります。Samsung Tab 2でAndroid 4.0.3を実行している場合、数字キーボードを取得できなくなりました。type = 'number'＆/またはtype = 'tel'を使用する場合でも。とてもイライラします！ところで、タップハイライトの色を設定しても、このデバイスとOSの構成に関するこの問題は解決されませんでした。私たちはAndroid用のSafariを実行しています。

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

このケースは、PhongeGapアプリケーションでも、v2.3 からv4.xまでのAndroidで機能します。Android 2.3.3を搭載したGalaxy Y、Android 4.2.2を搭載したNexus 4、Android 4.1.2を搭載したGalaxy Note 2でテストしました。そのため、要素自体の状態に対してのみ定義しないでください。

CSSファイルで以下のコードを使用します

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

それは私にとって仕事です。うまくいきますように。

これはイメージマップエリアリンクでは機能しませんでした。唯一の有効な解決策は、ontouchendイベントをキャプチャしてJavaScriptを使用し、ハンドラーでfalseを返してデフォルトのブラウザー動作を防止することでした。

jQueryを使って：

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

私の経験を共有したかっただけです。これを実際に機能させることはできませんでした。遅いcss- *を避けたかったのです。私の解決策は、古き良きエリック・マイヤーのリセット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の組み合わせと、たとえばテキストの強調表示を無効にすると、多くの問題が生じます。最悪の1つは、突然キーボード入力が機能しなくなり、キーボードの視覚化が遅くなることです。

オレンジ色のハイライトが無効になっている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;
}

ボーダーのアウトラインを無効にする次のコードを試してください

概要：なし！重要;