[CSS]input要素の有効(無効)な状態を表示

2014年8月10日2021年9月8日

構文
セレクタ:enabled{xxx}
セレクタ:disabled{xxx}

使用例

<style>
  /*セレクタのenabled属性*/
  input:enabled {
      background-color: skyblue;
    }
  /*セレクタのdisabled属性*/
 input:disabled {
     background-color: gray;
  }
</style>
<form action="userFrm">
  
  <!-- :enabledを指定-->
  <label for="UserField">ユーザー名:</label>
  <input type="text" id="username" value="アクティブ化"><br>
  
  <!--:disabledを指定 -->
  <label for="PwdField">パスワード:</label>
  <input type="text" id="pwd" value="非アクティブ" disabled="disabled"><br>　<br>
  <input type="button" value="ログイン">
</form>