方法1: CSSの:focus疑似クラスを使用する方法 最も一般的な方法は、CSSの:focus疑似クラスを使用することです。以下のコード例は、リンク要素のフォーカス時にボーダーの色を変更する方法を示しています。
a:focus {
border-color: red;
}このコードは、リンク要素がフォーカスされたときにボーダーの色を赤に変更します。必要に応じて、他の要素に対しても同様の方法が適用できます。
方法2: JavaScriptを使用する方法 JavaScriptを使用することで、より柔軟な方法でボーダーの色を変更することができます。以下のコード例は、特定の要素がフォーカスされたときにボーダーの色を変更する方法を示しています。
<input type="text" id="myInput">
<script>
var input = document.getElementById("myInput");
input.addEventListener("focus", function() {
this.style.borderColor = "blue";
});
input.addEventListener("blur", function() {
this.style.borderColor = "";
});
</script>このコードは、テキスト入力フィールドがフォーカスされたときにボーダーの色を青に変更し、フォーカスが外れたときに元のボーダーの色に戻します。
以上の方法を使用することで、要素のフォーカス時にボーダーの色を変更することができます。必要に応じて、他のスタイリングやイベントハンドリングのテクニックを組み合わせることもできます。