/ 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>
Voir de code :checked dans :

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


Aller en haut de la page

Vos paramètres de cookies

Ce site utilise des cookies pour améliorer votre expérience utilisateur et optimiser le fonctionnement du site.
Des contenus publicitaires vous sont aussi présentés, ainsi que cookies de partages sur les réseaux sociaux.

Vous pouvez accepter ces cookies en cliquant sur « Autoriser tous les cookies », cliquer sur « Paramétrer les cookies » pour gérer vos préférences de cookies.