inputタグがdisabled状態の時の文字色などのCSS・Styleを変更する方法まとめ(Safari, iOS, iPhone にも対応)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、inputタグがdisabled状態の時の文字色などのCSS・Styleを変更(Safari, iOS, iPhone にも対応)する方法についてまとめて解説していきます。

inputタグがdisabled状態の時の文字色などのCSS・Styleを変更する方法

inputタグがdisabled状態の時の文字色などのCSS・Styleを変更するには、

次のように .class-name:disabled のような擬似クラスのセレクタ指定をすることで、disabled状態の時だけの Style指定をすることができます。

/* 1. Disabled 状態の時だけ、次のような Styleを割り当てる */
.custom-number-input:disabled {
  text-align: center;
  color: #000000de;
  -webkit-text-fill-color: #000000de; // Safari の input Disabled の際の文字色を変更する
  opacity: 1; // iOS の場合は、文字色を変更するために、この指定も必須
  border: 2px solid #ccc9c9;
  border-radius: 8px;
  width: 60px;
}

iPhone(iOS)のSafariで、disabledのinputの文字色を指定する

また、inputタグがdisabled状態の時の文字色のStyle変更は、iOS と Safariの場合は、次の2つの指定が追加で必要になります。

1. Safariの場合は、-webkit-text-fill-colorの指定が必要。
2. iOSの場合は、opacity: 1;の指定が必要。

input {
  -webkit-text-fill-color: black; // Safari対応 => Safari の input Disabled の際の文字色を変更する
  opacity: 1; // iOS対応 => iOS の場合は、文字色を変更するために、この指定も必須
}

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

Twitterやってます！Follow Me！

参考・引用

1. iPhoneのSafariでdisabledのinputの文字色を指定する

最近の投稿

2024年1月17日【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 2024年1月17日JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) 2023年12月30日PythonでCSVをJSONに変換する方法 2023年12月30日PythonでCSV・Dataframeを指定の行数まで切り取る方法 2023年12月28日JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 2023年12月28日VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法