HTML/CSSで選択されたときに入力フィールドの枠の色を変更する方法

:focus 疑似クラスを使用する方法: HTML:
```
<input type="text" class="input-field">
```

CSS:

.input-field:focus {
  border: 2px solid blue;
}

この方法では、:focus 疑似クラスを使用して、入力フィールドが選択されたときに適用するスタイルを指定します。上記の例では、選択された入力フィールドの枠の色を青色に変更しています。

JavaScriptを使用する方法: HTML:

<input type="text" class="input-field" onfocus="changeBorderColor(this)">

JavaScript:

function changeBorderColor(element) {
  element.style.border = "2px solid red";
}

この方法では、JavaScriptを使用して入力フィールドが選択されたときに呼び出される関数を定義し、その関数内で枠の色を変更します。上記の例では、選択された入力フィールドの枠の色を赤色に変更しています。

CSSの変数を使用する方法: HTML:
```
<input type="text" class="input-field">
```

CSS:

:root {
  --border-color: black;
}
.input-field:focus {
  border: 2px solid var(--border-color);
}

JavaScript:

document.querySelector(".input-field").addEventListener("focus", function() {
  document.documentElement.style.setProperty('--border-color', 'green');
});

この方法では、CSSの変数を使用して枠の色を定義し、JavaScriptを使用して変数の値を変更します。上記の例では、選択された入力フィールドの枠の色を緑色に変更しています。

これらはいくつかの一般的な方法ですが、他にもさまざまな方法があります。使用する環境や要件に応じて、最適な方法を選択してください。