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

Exemple de code du sélecteur CSS :read-only.

<style type="text/css">
.defaut{ margin:5px }
#form :-moz-read-only{ outline : red dotted 2px }
#form { outline : red dotted 2px }
</style>
<form action="?" id="form">
  <fieldset class="defaut">
    <legend>Avec :read-only:</legend>
    <input type="text" readonly value=""><br>
    <label>checkbox : <input type="checkbox" readonly></label><br>
    <label>radio : <input type="radio" name="greadonly" readonly></label><br>
    <label>radio : <input type="radio" name="greadonly" readonly ></label><br>
    <select>
      <option readonly>readonly</option>
      <option readonly>readonly</option>
    </select><br><br>
    <label>Label :<br><textarea readonly="readonly"></textarea></label><br><br>
    <button type="button" readonly>Bouton</button><br><br>
    <span>Je suis un span</span>
  </fieldset>
  <fieldset class="defaut" contenteditable="true">
    <legend contenteditable="true">Sans :read-only : </legend>
    <input type="text" value=""><br>
    <label>checkbox : <input type="checkbox"></label><br>
    <label>radio : <input name="gnoreadonly" type="radio"></label><br>
    <label>radio : <input name="gnoreadonly" type="radio"></label><br>
    <select>
      <option>readonly</option>
      <option>readonly</option>
    </select><br><br>
    <label contenteditable="true">Label :<br><textarea></textarea></label><br><br>
    <button type="button">Bouton</button><br><br>
    <span contenteditable="true">Je suis un span</span>
  </fieldset>
</form>
 

Interprétation du code du sélecteur :read-only CSS par votre navigateur.

Avec :read-only:









Je suis un span
Sans :read-only :









Je suis un span

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

copie d'écran de l'affichage du sélecteur CSS :read-only