【デザインをワンランクアップ】Safari/Chromeのテキスト入力・テキストエリアのグローをCSSでスタイリッシュに削除

2024-04-16

Safari/Chrome のテキスト入力要素とテキストエリアのグローを削除する CSS コード

SafariやChromeなどのブラウザでは、テキスト入力要素とテキストエリアにデフォルトでグロー効果が適用されます。このグロー効果は、入力フィールドがフォーカスされていることを視覚的に示すために役立ちますが、デザインによっては不要な場合もあります。

このチュートリアルでは、CSSを使用して Safari/Chrome のテキスト入力要素とテキストエリアのグローを削除する方法を説明します。

解決策

/* Safari/Chrome のテキスト入力要素とテキストエリアのグローを削除 */
input:-webkit-autofill,
textarea:-webkit-autofill,
input:-webkit-focus-ring,
textarea:-webkit-focus-ring {
  outline: none;
  border: none;
}

説明

上記の CSS コードは、以下の要素に影響を与えます。

input:-webkit-autofill: 自動入力されたテキスト入力要素

これらの要素に対して、outline と border プロパティを none に設定することで、グロー効果を削除します。

補足

この CSS コードは、Safari と Chrome のみで有効です。他のブラウザでは、デフォルトのグロー効果が表示される可能性があります。

input,
textarea {
  outline: none;
  border: none;
}

#my-input,
#my-textarea {
  outline: none;
  border: none;
}

HTML

<!DOCTYPE html>
<html>
<head>
  <title>CSS - Safari/Chrome のテキスト入力要素とテキストエリアのグローを削除</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>CSS - Safari/Chrome のテキスト入力要素とテキストエリアのグローを削除</h1>

  <form>
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">

    <label for="message">メッセージ:</label>
    <textarea id="message" name="message"></textarea>

    <input type="submit" value="送信">
  </form>
</body>
</html>

CSS

/* Safari/Chrome のテキスト入力要素とテキストエリアのグローを削除 */
input:-webkit-autofill,
textarea:-webkit-autofill,
input:-webkit-focus-ring,
textarea:-webkit-focus-ring {
  outline: none;
  border: none;
}

このコードは、以下の要素を作成します。

フォーム
名前用のテキスト入力フィールド
メッセージ用のテキストエリア
送信ボタン

実行方法

上記の HTML と CSS コードをそれぞれ index.html と style.css というファイルに保存します。
Web ブラウザで index.html ファイルを開きます。

結果

テキスト入力フィールドとテキストエリアにフォーカスしても、グロー効果が表示されないことを確認できます。

すべてのブラウザでテキスト入力要素とテキストエリアのグローを削除するには、以下の CSS コードを使用することができます。

input,
textarea {
  outline: none;
  border: none;
}

#my-input,
#my-textarea {
  outline: none;
  border: none;
}

Safari/Chrome のテキスト入力要素とテキストエリアのグローを削除するその他の方法

/* Safari と Chrome のみでテキスト入力要素とテキストエリアのグローを削除 */
input:-webkit-autofill,
textarea:-webkit-autofill,
input:-webkit-focus-ring,
textarea:-webkit-focus-ring {
  outline: none;
  border: none;
}

/* Firefox でテキスト入力要素とテキストエリアのグローを削除 */
input[type="text"],
textarea {
  outline: none;
  border: none;
}

このコードは、user-agent セレクタを使用して、Safari と Chrome にのみ影響を与えるようにしています。

方法 2: JavaScript を使用する

// Safari と Chrome でフォーカス時にグロー効果を削除
const inputs = document.querySelectorAll('input, textarea');

for (const input of inputs) {
  input.addEventListener('focus', () => {
    input.style.outline = 'none';
    input.style.border = 'none';
  });

  input.addEventListener('blur', () => {
    input.style.outline = '';
    input.style.border = '';
  });
}