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

2021年9月8日

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

使用例

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<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>
<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>
<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>

 

CSS

Posted by arkgame