[Q&A] formの枠線の色が変わりません。。

formの枠線の色が変わりません。。

解決したいこと

formの枠線をカーソル合わせたときに色を変えたいです。
https://code-kitchen.dev/css/invalid/
こちらのページを参考にしたのですが、上手くいきません。。
解決方法を教えてください。

該当するソースコード

<form>
  <dl>
    <dd>
      <div class="name-box">
        <label class="factory"><h3>会社名</h3></label>
        <div class="need">必須</div>
      </div>
      <input class="text" type="text" name="factory" required>
      <div class="error">必須項目です入力してください</div>
    </dd>
  </dl>
</form>

CSS

.error {
  display: none;
  font-size: 13px;
  color: #dd3f1d;
  margin-left: 10px;
  margin-bottom: 15px;
}
input:invalid + .error {
  display: block;
}
input:invalid:focus {
  border: solid 1px red;
  border-style: none;
}

自分で試したこと

input:invalid:focus これでカーソルを合わせたときに色が変わると思っていましたが、なぜか変わりません。
設定してないのですが、枠線の色が黄色になっていしまいます。

【カーソルを合わせる前】

【カーソルを合わせた後】

何が悪いのか分かりません。
どなたか教えてください。。

1Answer

@isshy_exception posted at 2022-12-04

参考サイト通りにすればうまくいきます

input:invalid:focus {
  border: solid 1px red;
- border-style: none;
+ outline: 0;
}

1Like

Comments

@Qrara
Questioner
できました！！
他のサイトとごっちゃになっていました、、、
ありがとうございます！！