[CSS]オプションボタン要素がチェックされたcssのサンプル

2014年8月9日2021年9月8日

構文
option:checked {処理コード}

使用例

<style>

select {

margin: 18px;

}

/* 選択されたオプションCSS */

option:checked {

box-shadow: 0 0 0 5px lime;

color:red;

background-color: skyblue;

}

</style>

<body>

</select>

</body>

<style> select { margin: 18px; } /* 選択されたオプションCSS */ option:checked { box-shadow: 0 0 0 5px lime; color:red; background-color: skyblue; } </style> <body> <select name="cityselect" id="city"> <option value="tokyo" >東京</option> <option value="oosaka">大阪</option> <option value="fukuoka">福岡</option> </select> </body>

<!--オプションボタンがチェックされた場合にCSSを適用-->
<style>
  select {
     margin: 18px;
  }
  /* 選択されたオプションCSS */
   option:checked {
      box-shadow: 0 0 0 5px lime;
      color:red;
      background-color: skyblue;
  }
</style>
<body>

<select name="cityselect" id="city">
  <option value="tokyo" >東京</option>
  <option value="oosaka">大阪</option>
  <option value="fukuoka">福岡</option>
</select>
</body>

CSS

Posted by arkgame

関連投稿: