方法1: :focus 疑似クラスを使用する方法
<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
border-color: red;
}
</style>
</head>
<body>
<input type="text" placeholder="入力フィールド">
</body>
</html>この方法では、:focus 疑似クラスを使用して、入力フィールドがフォーカス（選択）された時に適用されるスタイルを指定します。上記の例では、境界線の色を赤に変更しています。
方法2: JavaScriptを使用する方法
<!DOCTYPE html>
<html>
<head>
<style>
input.selected {
border-color: blue;
}
</style>
<script>
function setInputSelected(input) {
input.classList.add("selected");
}
function setInputUnselected(input) {
input.classList.remove("selected");
}
</script>
</head>
<body>
<input type="text" placeholder="入力フィールド" onfocus="setInputSelected(this)" onblur="setInputUnselected(this)">
</body>
</html>この方法では、JavaScriptを使用して入力フィールドのクラスを動的に変更することで、選択された時に境界線の色を変更します。上記の例では、入力フィールドがフォーカスされると selected クラスが追加され、境界線の色が青に変更されます。
以上の方法を使用すると、入力フィールドが選択された時に境界線の色を変更することができます。これにより、ユーザーが入力フィールドにフォーカスした時に視覚的なフィードバックを提供することができます。