736

HTML 要素が「フォーカス」されている (現在選択されている/タブで移動されている) 場合、多くのブラウザー (少なくとも Safari と Chrome) はその周りに青い境界線を配置します。

私が取り組んでいるレイアウトでは、これは気が散り、正しく見えません。

<input type="text" name="user" class="middle" id="user" tabindex="1" />

Firefox はこれを行っていないようです。少なくとも、次の方法で制御できます。

border: x;

誰かが IE のパフォーマンスを教えてくれたら、私は興味があります。

Safari でこのわずかなフレアを削除できると便利です。

4

19 に答える 19

1305

あなたの場合、試してみてください：

input.middle:focus {
    outline-width: 0;
}

または、一般的に、すべての基本的なフォーム要素に影響を与えます。

input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}

コメントの中で、Noah Whitmorecontenteditableは、属性がに設定されている要素をサポートするために、これをさらに進めることを提案しましたtrue（事実上、それらを一種の入力要素にします）。以下はそれらもターゲットにする必要があります（CSS3対応ブラウザーの場合）。

[contenteditable="true"]:focus {
    outline: none;
}

私はお勧めしませんが、完全を期すために、これを使用してすべてのフォーカスアウトラインをいつでも無効にすることができます。

*:focus {
    outline: none;
}

フォーカスのアウトラインはアクセシビリティとユーザビリティの機能であることに注意してください。これにより、ユーザーは現在どの要素に焦点が当てられているかがわかります。

于 2009-09-22T03:27:22.517 に答える
77

すべての入力から削除するには

input {
 outline:none;
}
于 2011-03-23T15:06:40.697 に答える
38

これは古いスレッドですが、参考までに、入力要素のアウトラインを無効にすることはアクセシビリティを妨げるため、推奨されないことに注意することが重要です。

アウトライン プロパティが存在するのには理由があります。ユーザーにキーボード フォーカスを明確に示すためです。このテーマに関する詳細情報と追加の情​​報源については、http://outlinenone.com/を参照してください。

于 2012-12-30T13:29:50.000 に答える
28

これはよくある懸念事項です。

ブラウザがレンダリングするデフォルトのアウトラインは醜いです。

たとえば、これを参照してください。

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}
<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

最も推奨される最も一般的な「修正」は、outline:noneこれを誤って使用すると、アクセシビリティの障害になります。

では、アウトラインは何の役に立つのでしょうか。

私が見つけた非常にドライカットのウェブサイトがあり、すべてをうまく説明しています。

TAB キー (または同等のキー) を使用して Web ドキュメントをナビゲートするときに、「フォーカス」のあるリンクに視覚的なフィードバックを提供します。これは、マウスを使用できない人や視覚障害のある人にとって特に便利です。アウトラインを削除すると、これらのユーザーがサイトにアクセスできなくなります。

では、上記と同じ例を試してみましょう。今度はTABキーを使用してナビゲートします。

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}
<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

入力をクリックしなくても、フォーカスがどこにあるかがわかります。

さあ、outline:none私たちの信頼できるものを試してみましょう<input>

もう一度、TABキーを使用してテキストをクリックした後に移動し、何が起こるかを確認してください。

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}
<form>
  <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
  <input type="text" placeholder="placeholder text" />
</form>

焦点がどこにあるかを把握するのがいかに難しいかがわかりますか? 唯一の兆候は、カーソルの点滅です。上記の例は単純すぎます。実際の状況では、ページに 1 つの要素しかないことはありません。これに沿った何か。

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none;
}
<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

アウトラインを維持した場合の同じテンプレートと比較します。

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}
<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

そのため、以下を確立しました。

  1. 輪郭が汚い
  2. それらを取り除くと、生活がより困難になります。

それで、答えは何ですか？

醜い輪郭を取り除き、フォーカスを示す独自の視覚的な合図を追加します。

これが私が言いたいことの非常に簡単な例です。

アウトラインを削除し、:focusと:activeに下の境界線を追加します。また、上、左、右のデフォルトの境界線を:focusと:activeで透明に設定して削除します(個人的な好み)。

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}
<form>
  <label>Click to see the input below to see the outline</label>
  <input type="text" placeholder="placeholder text" />
</form>

したがって、前述の「実際の」例で上記のアプローチを試します。

.wrapper {
  width: 500px;
  max-width: 100%;
  margin: 0 auto;
}

form,
label {
  margin: 1em auto;
}

label {
  display: block;
}

input {
  outline: none
}

input:focus,
input:active {
  border-color: transparent;
  border-bottom: 2px solid red
}
<div class="wrapper">

  <form>
    <label>Click on this text and then use the TAB key to naviagte inside the snippet.</label>
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
    <input type="text" placeholder="placeholder text" />
  </form>

  <form>
    First name:<br>
    <input type="text" name="firstname"><br> Last name:<br>
    <input type="text" name="lastname">
  </form>


  <form>
    <input type="radio" name="gender" value="male" checked> Male<br>
    <input type="radio" name="gender" value="female"> Female<br>
    <input type="radio" name="gender" value="other"> Other
  </form>



  <form>
    <label for="GET-name">Name:</label>
    <input id="GET-name" type="text" name="name">
  </form>


  <form>
    <label for="POST-name">Name:</label>
    <input id="POST-name" type="text" name="name">
  </form>


  <form>
    <fieldset>
      <legend>Title</legend>
      <input type="radio" name="radio" id="radio">
      <label for="radio">Click me</label>
    </fieldset>
  </form>

</div>

マテリアライズのように「アウトライン」を完全に削除するのではなく、「アウトライン」を変更するという考えに基づいて構築された外部ライブラリを使用することで、これをさらに拡張できます。

あなたは醜いものではなく、ほとんど努力しないで動作するものに行き着くことができます

body {
  background: #444
}

.wrapper {
  padding: 2em;
  width: 400px;
  max-width: 100%;
  text-align: center;
  margin: 2em auto;
  border: 1px solid #555
}

button,
.wrapper {
  border-radius: 3px;
}

button {
  padding: .25em 1em;
}

input,
label {
  color: white !important;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css" />

<div class="wrapper">
  <form>
    <input type="text" placeholder="Enter Username" name="uname" required>
    <input type="password" placeholder="Enter Password" name="psw" required>
    <button type="submit">Login</button>
  </form>
</div>

于 2017-08-24T11:45:54.183 に答える
8

私はすべての答えを試しましたが、見つけるまで、モバイル-webkit-tap-highlight-colorで動作させることができませんでした。

だから、私のために働いたのは...

* { -webkit-tap-highlight-color: transparent; }
于 2018-04-05T09:44:43.763 に答える
7

CSS を使用して無効にすることができます。これは、青い境界線を無効にするために使用するコードです。

*:focus {
    outline: none;
}

これは実用的な例です

于 2016-02-23T01:38:40.560 に答える
4

次のコードを使用します。

input:focus {
    outline: 0;
}
于 2013-05-22T20:35:46.113 に答える
4

フォーカスのあるテキストエリアにはbox-shadow .. 次のように削除できます:

textarea:focus{
    outline: none!important;
    box-shadow: none!important;
}
于 2021-04-24T19:30:46.820 に答える
3

これも試すことができます

input[type="text"] {
outline-style: none;
}

また

.classname input{
outline-style: none;
}
于 2016-12-16T06:17:54.773 に答える
0

以下の CSS プロパティを使用して、要素にフォーカスがあるときにアウトラインを削除します。

input:focus {
    outline: 0;
}

この CSS プロパティは、フォーカスのあるすべての入力フィールドのアウトラインを削除するか、以下の CSS プロパティを使用して要素のアウトラインを削除するために疑似クラスを使用します。

.className input:focus {
    outline: 0;
}

このプロパティは、選択した要素のアウトラインを削除します。

于 2015-12-10T06:24:28.470 に答える