/ Code Css :checked | Résultat du code Css :checked | Copie d'écran / J'ai vu une erreur dans cette page

Exemple de code du sélecteur CSS :checked.

<style type="text/css">
.exemple .checked + label::after {
  content: ' Est checked.'; 
  color : red
}
.exemple .checked option  { 
  color : red
}
.exemple{ border:1px solid #666; margin-bottom:15px; margin-top:5px; padding:5px }
.exemple input { border: 1px solid black; }
</style>
<form action="?" id="form1"> 
  <b>Sur une case à cocher :</b>
  <div class="exemple">
    <input type="checkbox" id="checked-ca" class="checked"/><label for="checked-ca">Cliquer</label><br>
    <input type="checkbox" id="checked-cb" class="checked" checked/><label for="checked-cb">Cliquer</label><br>
    <input type="checkbox" id="checked-cc" class="checked" checked disabled><label for="checked-cc">Cliquer</label><br>
    <input type="checkbox" id="checked-cd" class="checked" checked readlonly><label for="checked-cd">Cliquer</label> 
  </div>
  <b>Sur des boutons radios :</b>
  <div class="exemple">
    <input type="radio" name="checkeda" id="checked-ra" class="checked"/><label for="checked-ra">Cliquer</label><br>
    <input type="radio" name="checkeda" id="checked-rb" class="checked" checked><label for="checked-rb">Cliquer</label><br>
    <input type="radio" name="checkeda" id="checked-rc" class="checked"/><label for="checked-rc">Cliquer</label>
  </div>
  <b>Sur des boutons radios et disabled:</b>
  <div class="exemple">
    <input type="radio" name="checkedb" id="checked-d-ra" class="checked" /><label for="checked-d-ra">Cliquer</label><br>
    <input type="radio" name="checkedb" id="checked-d-rb" class="checked" checked disabled><label for="checked-d-rb">disabled</label><br>
    <input type="radio" name="checkedb" id="checked-d-rc" class="checked"><label for="checked-d-rc">Cliquer</label><br>
  </div>
  <b>Sur des boutons radios et readonly :</b>
  <div class="exemple">
    <input type="radio" name="checkedc" id="checked-c-ra" class="checked"/><label for="checked-c-ra">Cliquer</label><br>
    <input type="radio" name="checkedc" id="checked-c-rb" class="checked" checked readonly/><label for="checked-c-rb">readonly</label><br>
    <input type="radio" name="checkedc" id="checked-c-rd" class="checked"/><label for="checked-c-rc">Cliquer</label><br>
  </div>
  <b>Sur un menu déroulant :</b>
  <div class="exemple">
    <select class="checked" id="checked-da" >
      <option>checked 1</option>
      <option selected>checked 2</option>
      <option>checked 3</option>
    </select><label for="checked-da"> </label>
  </div>
  <b>Sur un menu déroulant :</b>
  <div class="exemple">
    <select class="checked" id="checked-db" disabled >
      <option>checked 1</option>
      <option selected>checked 2</option>
      <option>checked 3</option>
    </select> <label for="checked-db"> </label>
  </div>
  <b>Sur un menu déroulant et readonly:</b>
  <div class="exemple">
    <select class="checked" id="checked-dc" readonly>
      <option>checked 1</option>
      <option selected>checked 2</option>
      <option>checked 3</option>
    </select><label for="checked-dc"> </label>
  </div>
</form>

Interprétation du code du sélecteur :checked CSS par votre navigateur.

Sur une case à cocher :



Sur des boutons radios :


Sur des boutons radios et disabled:



Sur des boutons radios et readonly :



Sur un menu déroulant :
Sur un menu déroulant :
Sur un menu déroulant et readonly:

Interprétation normale du code du sélecteur CSS :checked (copie d'écran).

copie d'écran de l'affichage du sélecteur CSS :checked