borderが上書きできないのはontlineだったから【CSSのinputのデザイン】

すぐ解決したのですけど、一応覚書。

borderが上書きできないのはontlineだったから【CSSのinputのデザイン】

デフォルトでフォーカス時に黒枠をついていたのですけど、他の色にしたかったのです。

このデフォルトがoutlineの可能性があります。この場合borderを!importantしても適応されません。outlineとborderは共存できないようです。手を取るべき方法は2つ。

• :focusでoutlineの色を上書きする
• :focusでoutlineをnoneしてborderを追加する

borderとontlineの違い

Border（枠線）

• 要素の内側に描画され、要素の全体的な寸法（幅と高さ）に影響を与えます。
• box-sizing プロパティによって、要素の寸法計算に border の幅を含めるかどうかが決まります。
• border-radius を使用して角を丸くすることができます。
• 各辺に異なるスタイルを適用することができます（例：border-top, border-rightなど）。
• 要素のレイアウト（例：フロート、クリア）に影響を及ぼすことがあります。

Outline（アウトライン）

• 要素の外側に描画され、要素の寸法には影響しません。
• outline はボックスモデルの一部ではなく、レイアウトの計算に含まれないため、周囲のコンテンツや要素のレイアウトに影響を与えません。
• outline は四辺に対して一括で適用され、個々の辺に異なるスタイルを設定することはできません。
• outline-offset プロパティによって、アウトラインと要素の境界との間の距離を調整できます。
• 一般的にアクセシビリティを向上させるための視覚的フィードバックとして使用されます。

多くのブラウザはデフォルトでフォーカスされた要素にoutlineを適用します。