「CSS」テキストボックスの:enabledと:disabled属性の指定サンプル

2022年2月18日

書式
セレクタ名: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>

結果
テキストボックス(username)が:disabled属性のCSSが適用されます。
テキストボックス(addr)が:enabled属性のCSSが適用されます。

CSS

Posted by arkgame

関連記事: