web-dev-qa-db-ja.com

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

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プロパティは、どちらのブラウザーでも機能しないようです。

androidfocushighlightoutline
104
eggdeng

試してください：

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

あなたのcssファイルで。それは私のために働いた！

35
yesil

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

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

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

tap-highlight-colorほとんどのバージョン

ser-modify for 4.0.4

18
oori

フォーカスラインをお試しください

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

このCSS -webkit-user-modify: read-write-plaintext-only;を使用すると、その恐ろしいハイライト「バグ」が削除されることに注意してください。 Samsung Tab 2でAndroid 4.0.3を実行している場合、数字キーボードを取得できなくなりました。 type = 'number'および/またはtype = 'tel'を使用しても。とてもイライラする！ところで、タップのハイライトの色を設定しても、このデバイスとOSの構成でこの問題を解決することはできませんでした。 Safari for Androidを実行しています。

10
Fivebears

tap-highlight-colorプロパティのオーバーライドが機能することを確認するには、最初に次のことを考慮してください。

動作しない：
-webkit-user-modify：読み取り/書き込み/プレーンテキストのみ。
//要素をクリックすると、ネイティブキーボードがポップアップすることがあります

.class：active、.class：focus {-webkit-tap-highlight-color：rgba（0,0,0,0）; }
//州に対して定義されている場合、機能しません

ワーキング：
.class { -webkit-tap-highlight-color: rgba(0,0,0,0); }

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

7
RynoRn

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

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

それは私の仕事です。私はそれがあなたのために働くことを望みます。

6
Kailas

私は自分の経験を共有したかっただけです。私は実際にこれを機能させることはできませんでした。遅いcss- *を避けたいと思いました。私の解決策は、古き良きEric MeyerのReset CSS v2.0（ http://meyerweb.com/eric/tools/css/reset/ ）をダウンロードし、これをphonegapプロジェクトに追加することでした。次に追加しました：

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

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

jQueryを使用：

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

私はこれを試してみましたが、うまくいきました。

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);
}
1
Ashoka Mondal

これは、タップだけでなくホバーにも有効です：

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

Ionicでのこの作業は、CSSファイルに書き込むだけで上書きできます

:focus {
    outline-width: 0px;
}
1
Snow Bases

デザインがアウトラインを使用しない場合、これは仕事をする必要があります：

*, *::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;
}
0
Robert Richter
<EditText
            Android:id="@+id/edittext"
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content"  
            Android:background="@Android:drawable/editbox_background_normal"                 

 />
0
Android