HTMLとCSSで選択時に入力フィールドの境界色を変更する方法

方法1: :focus 疑似クラスを使用する方法

HTMLコード:

<input type="text" id="myInput">

CSSコード:

#myInput:focus {
  border-color: blue;
}

この方法では、#myInputというIDを持つ入力フィールドが選択されたときに、境界色を青色に変更します。:focus疑似クラスは、要素がフォーカスを受け取った状態を表します。

方法2: JavaScriptを使用する方法

HTMLコード:

<input type="text" id="myInput" onfocus="changeBorderColor(this)">

JavaScriptコード:

function changeBorderColor(element) {
  element.style.borderColor = 'red';
}

この方法では、changeBorderColorという関数を使用して、入力フィールドが選択されたときに境界色を赤色に変更します。onfocus属性を使用して、入力フィールドがフォーカスを受け取ったときにchangeBorderColor関数を呼び出します。

方法3: jQueryを使用する方法

HTMLコード:

<input type="text" id="myInput">

JavaScriptコード:

$(document).ready(function() {
  $('#myInput').focus(function() {
    $(this).css('border-color', 'green');
  });
});

この方法では、jQueryを使用して入力フィールドの境界色を変更します。$(document).ready関数は、ドキュメントの読み込みが完了したときに実行されるコードブロックを定義します。$('#myInput')は、myInputというIDを持つ要素を選択します。focus関数は、要素がフォーカスを受け取ったときに呼び出されるコールバック関数を定義します。

これらはいくつかの一般的な方法ですが、実際の使用状況や要件に応じてカスタマイズすることができます。選択時に境界色を変更するための他の方法も存在しますが、ここでは代表的な方法を紹介しました。