web-dev-qa-db-ja.com

Safari / Chrome textinput / textarea glowを削除します。

CSSを使用してテキスト入力/テキスト領域をクリックしたときにデフォルトの青と黄色の輝きを消すことが可能かどうか疑問に思いますか。

csscross-browser
318
Alec Smart
textarea, select, input, button { outline: none; }

ただし、グロー/アウトラインを維持することは、どの要素が現在フォーカスされているかをユーザーが確認するのに役立つため、実際にはアクセシビリティにとって有益であると主張されています。

ユーザーが入力を選択したときにのみ入力をターゲットにするために、擬似要素 '：focus'を使用することもできます。

デモ： https://jsfiddle.net/JohnnyWalkerDesign/xm3zu0cf/

584
ajm

この効果は、非入力要素にも発生する可能性があります。私はより一般的な解決策として以下の作品を見つけました

:focus {
  outline-color: transparent;
  outline-style: none;
}

更新：:focusセレクターを使う必要はないかもしれません。あなたが要素を持っているなら、<div id="mydiv">stuff</div>と言って、そしてあなたはこのdiv要素の外側の輝きを得ていた、ただ普通のように適用しなさい：

#mydiv {
  outline-color: transparent;
  outline-style: none;
}
88
Carl W

Webkitベースのブラウザでテキストエリアのサイズを変更する場合

Textareaにmax-heightとmax-widthを設定しても、視覚的なサイズ変更ハンドルは削除されません。試してください：

resize: none;

（そしてはい、私は「ユーザーの期待を損なうようなことをしないようにすることに同意します」と同意しますが、時には意味を成すこともあります、つまりウェブアプリケーションのコンテキストでは）

Webkitフォーム要素の外観を最初からカスタマイズするには

-webkit-appearance: none;
13
Thomas Maas

Carl W ：

この効果は、非入力要素にも発生する可能性があります。私はより一般的な解決策として以下の作品を見つけました

:focus {
  outline-color: transparent;
  outline-style: none;
}

これについて説明します。

  • :focusは、フォーカスのある要素をスタイルすることを意味します。それで、フォーカスのある要素にスタイルを設定します。
  • outline-color: transparent;は青い輝きが透明であることを意味します。
  • outline-style: none;も同じことをします。
5
MineCMD

これはアクセシビリティを気にする人のための解決策です。

フォーカスアウトラインを無効にするためにoutline:none;を使用しないでください。あなたがこれをするならば、あなたはウェブのアクセシビリティを殺しています。これを行うにはアクセスしやすい方法があります。

チェックアウト この記事 私がアクセスしやすい方法でボーダーを削除する方法を説明するために書いたこと。

要するに、キーボードユーザーを検出したときにだけアウトラインボーダーを表示するというものです。ユーザーがマウスを使い始めたら、アウトラインを無効にします。その結果、あなたは2つのうち最高のものを手に入れることができます。

4
Wim Mostmans

私はこれをクリックイベントがあるdivで経験しました、そして20回の検索の後に私は私の日を救うこの断片を見つけました。

-webkit-tap-highlight-color: rgba(0,0,0,0);

これにより、Webkitモバイルブラウザのデフォルトのボタンの強調表示が無効になります

3
Michael

Bootstrapのボタンからの輝きを取り除きたい場合（これは必ずしも悪いUXではありません）、次のコードが必要です。

.btn:focus, .btn:active:focus, .btn.active:focus{
  outline-color: transparent;
  outline-style: none;
}
2
Kyle S

時にはそれが起こるボタンも外の線を削除するために以下を使用

input:hover
input:active, 
input:focus, 
textarea:active,
textarea:hover,
textarea:focus, 
button:focus,
button:active,
button:hover
{
    outline:0px !important;
}
1
vamsikrishnamannem

アウトラインがスライドドアの画像の右側の「キャップ」を覆っていないため、フォーカス状態が少し不鮮明に見えるため、「スライドドア」タイプの入力ボタンでアウトラインを削除すると便利です。

input.slidingdoorbutton:focus { outline: none;}
0
richfinelli

もちろんです。 *を使用して、すべてのHTML要素から青い枠線を削除することもできます。

*{
    outline-color: transparent;
    outline-style: none;
  }

そして

 *{
     outline: none;   
   }
0
Santosh Khalse
<select class="custom-select">
        <option>option1</option>
        <option>option2</option>
        <option>option3</option>
        <option>option4</option>
</select>

<style>
.custom-select {
        display: inline-block;
        border: 2px solid #bbb;
        padding: 4px 3px 3px 5px;
        margin: 0;
        font: inherit;
        outline:none; /* remove focus ring from Webkit */
        line-height: 1.2;
        background: #f8f8f8;

        -webkit-appearance:none; /* remove the strong OSX influence from Webkit */

        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }
    /* for Webkit's CSS-only solution */
    @media screen and (-webkit-min-device-pixel-ratio:0) { 
        .custom-select {
            padding-right:30px;    
        }
    }

    /* Since we removed the default focus styles, we have to add our own */
    .custom-select:focus {
        -webkit-box-shadow: 0 0 3px 1px #c00;
        -moz-box-shadow: 0 0 3px 1px #c00;
        box-shadow: 0 0 3px 1px #c00;
    }

    /* Select arrow styling */
    .custom-select:after {
        content: "▼";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        font-size: 60%;
        line-height: 30px;
        padding: 0 7px;
        background: #bbb;
        color: white;

        pointer-events:none;

        -webkit-border-radius: 0 6px 6px 0;
        -moz-border-radius: 0 6px 6px 0;
        border-radius: 0 6px 6px 0;
    }
</style>
0
criss_ae

私はテキスト入力フィールドからこの影響を取り除く必要があるだけで、他のテクニックをうまく機能させることはできませんでしたが、これが私のために機能するものです。

input[type="text"], input[type="text"]:focus{
            outline: 0;
            border:none;
            box-shadow:none;

    }

FirefoxとChromeでテスト済み。

0
Martyn Shutt