「CSS」テキストボックスの:enabledと:disabled属性の指定サンプル
書式
セレクタ名:enabled{
}
:enabledは、disabled属性が指定されていない場合にCSSを適用します。
セレクタ名:disabled{
}
:disabledは、disabled属性が指定されている場合にCSSを適用します。
使用例
<style>
input:enabled {
background-color: skyblue
}
input:disabled {
background-color: gray
}
</style>
<body>
<p><input type="text" name="username" value="disabled属性" disabled/></p>
<p><input type="text" name="addr" value="enabled属性" /></p>
</body>
<style>
input:enabled {
background-color: skyblue
}
input:disabled {
background-color: gray
}
</style>
<body>
<p><input type="text" name="username" value="disabled属性" disabled/></p>
<p><input type="text" name="addr" value="enabled属性" /></p>
</body>
<style>
input:enabled {
background-color: skyblue
}
input:disabled {
background-color: gray
}
</style>
<body>
<p><input type="text" name="username" value="disabled属性" disabled/></p>
<p><input type="text" name="addr" value="enabled属性" /></p>
</body>
結果
テキストボックス(username)が:disabled属性のCSSが適用されます。
テキストボックス(addr)が:enabled属性のCSSが適用されます。