方法1: :empty 疑似クラスを使用する方法 この方法では、:empty 疑似クラスを使用して、入力フィールドが空かどうかを判断します。例えば、次のようにCSSを記述します。
input:empty {
/* 入力フィールドが空の場合のスタイルを指定 */
}この方法では、入力フィールドに値が入力されていない場合にスタイルを適用することができます。
方法2: [attribute="value"] 属性セレクタを使用する方法 この方法では、[attribute="value"] 属性セレクタを使用して、入力フィールドの値が指定した値と一致するかどうかを判断します。例えば、次のようにCSSを記述します。
input[value=""] {
/* 入力フィールドが空の場合のスタイルを指定 */
}この方法では、入力フィールドの値が空の場合にスタイルを適用することができます。
方法3: JavaScriptと組み合わせる方法 CSSだけでは入力フィールドの値を検出することはできませんが、JavaScriptと組み合わせることで実現できます。例えば、次のようなJavaScriptコードを使用して、入力フィールドの値を検出し、CSSクラスを追加することができます。
<input type="text" id="myInput" oninput="checkInputValue()">
<script>
function checkInputValue() {
var input = document.getElementById("myInput");
if (input.value !== "") {
input.classList.add("has-value");
} else {
input.classList.remove("has-value");
}
}
</script>
<style>
input.has-value {
/* 入力フィールドに値がある場合のスタイルを指定 */
}
</style>この方法では、入力フィールドの値が変更されるたびに JavaScript の checkInputValue 関数が呼び出され、入力フィールドに値がある場合には "has-value" クラスが追加されます。
これらの方法を使用することで、CSSで入力フィールドに値があるかどうかを検出し、それに応じたスタイルを適用することができます。