Pouvez-vous attribuer à un bouton radio HTML l'apparence d'une case à cocher?
J'ai un formulaire HTML qu'un utilisateur va remplir et imprimer. Une fois imprimés, ces formulaires seront faxés ou envoyés par la poste à un organisme gouvernemental et devront être suffisamment proches du formulaire original publié par ledit organisme pour qu'un bureaucrate du gouvernement ne s'aperçoive pas qu'il s'agit d'une reproduction. Les données saisies dans le formulaire ne sont enregistrées nulle part, ni même renvoyées à un serveur Web. Tout ce qui compte, c'est que nos utilisateurs puissent facilement trouver ces formulaires sur notre site intranet et les saisir dans le formulaire pour les imprimer avec leur clavier habituel.
Sur l'écran, je veux laisser le bouton radio tel quel, pour appliquer et communiquer l'utilisation du bouton radio (choisissez une seule option). Cependant, lors de l'impression, j'ai besoin d'imprimer avec le style de case à cocher carré plutôt qu'avec le style de bouton radio rond. Je sais comment utiliser un sélecteur de support pour définir les styles uniquement pour l'impression. Ce n'est donc pas le problème. C'est juste que je ne sais pas si je peux styler le bouton radio comme je le veux du tout.
Si je ne peux pas fonctionner, je vais devoir créer une case à cocher pour masquer chaque bouton radio, utiliser javascript pour synchroniser les cases à cocher et les boutons radio, et css pour afficher celui qui me tient à cœur sur le support approprié. Évidemment, si je pouvais simplement les nommer, cela économiserait beaucoup de travail.
Trois ans après la publication de cette question, cette question est presque à votre portée. En fait, c’est tout à fait réalisable dans Firefox 1+, Chrome 1+, Safari 3+ et Opera 15+ en utilisant le CSS3 appearance propriété.
Le résultat est des éléments radio qui ressemblent à des cases à cocher:
input[type="radio"] {
-webkit-appearance: checkbox; /* Chrome, Safari, Opera */
-moz-appearance: checkbox; /* Firefox */
-ms-appearance: checkbox; /* not currently supported */
}<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>Remarque: ceci a finalement été supprimé de la spécification CSS3 en raison d'un manque de support et de conformité de la part des fournisseurs. Je vous déconseille de le mettre en œuvre, sauf si vous devez uniquement prendre en charge les navigateurs Webkit ou Gecko.
En CSS3:
input[type=radio] {content:url(mycheckbox.png)}
input[type=radio]:checked {content:url(mycheckbox-checked.png)}
En réalité:
<span class=fakecheckbox><input type=radio><img src="checkbox.png" alt=""></span>
@media screen {.fakecheckbox img {display:none}}
@media print {.fakecheckbox input {display:none;}}
et vous aurez besoin de Javascript pour garder <img> et les radios en synchronisation (et les insérer idéalement là en premier lieu)
J'ai utilisé <img>, car les navigateurs sont généralement configurés pour ne pas imprimer background-image. Il est préférable d'utiliser une image plutôt qu'un autre contrôle, car l'image n'est pas interactive et est moins susceptible de poser problème.
Ceci est ma solution en utilisant uniquement CSS (Jsfiddle: http://jsfiddle.net/xykPT/ ).
div.options > label > input {
visibility: hidden;
}
div.options > label {
display: block;
margin: 0 0 0 -10px;
padding: 0 0 20px 0;
height: 20px;
width: 150px;
}
div.options > label > img {
display: inline-block;
padding: 0px;
height:30px;
width:30px;
background: none;
}
div.options > label > input:checked +img {
background: url(http://cdn1.iconfinder.com/data/icons/onebit/PNG/onebit_34.png);
background-repeat: no-repeat;
background-position:center center;
background-size:30px 30px;
}<div class="options">
<label title="item1">
<input type="radio" name="foo" value="0" />
Item 1
<img />
</label>
<label title="item2">
<input type="radio" name="foo" value="1" />
Item 2
<img />
</label>
<label title="item3">
<input type="radio" name="foo" value="2" />
Item 3
<img />
</label>
</div>J'ai modifié la réponse de user2314737 à utiliser font awesome pour l'icône. Pour ceux qui ne connaissent pas fa, l'un des avantages importants par rapport à img est le rendu vectoriel inhérent aux polices. C'est à dire. aucune image ne brouille à aucun niveau de zoom.
jsFiddle
Résultat
div.checkRadioContainer > label > input {
visibility: hidden;
}
div.checkRadioContainer {
max-width: 10em;
}
div.checkRadioContainer > label {
display: block;
border: 2px solid grey;
margin-bottom: -2px;
cursor: pointer;
}
div.checkRadioContainer > label:hover {
background-color: AliceBlue;
}
div.checkRadioContainer > label > span {
display: inline-block;
vertical-align: top;
line-height: 2em;
}
div.checkRadioContainer > label > input + i {
visibility: hidden;
color: green;
margin-left: -0.5em;
margin-right: 0.2em;
}
div.checkRadioContainer > label > input:checked + i {
visibility: visible;
}<div class="checkRadioContainer">
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 1</span>
</label>
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 2</span>
</label>
<label>
<input type="radio" name="radioGroup" />
<i class="fa fa-check fa-2x"></i>
<span>Item 3</span>
</label>
</div>apparence propriété ne fonctionne pas dans tous les navigateurs. Vous pouvez faire comme ce qui suit-
input[type="radio"]{
display: none;
}
label:before{
content:url(http://strawberrycambodia.com/book/admin/templates/default/images/icons/16x16/checkbox.gif);
}
input[type="radio"]:checked+label:before{
content:url(http://www.treatment-abroad.ru/img/admin/icons/16x16/checkbox.gif);
}
<input type="radio" name="gender" id="test1" value="male">
<label for="test1"> check 1</label>
<input type="radio" name="gender" value="female" id="test2">
<label for="test2"> check 2</label>
<input type="radio" name="gender" value="other" id="test3">
<label for="test3"> check 3</label> Cela fonctionne IE 8+ et d'autres navigateurs
Oui, CSS peut faire ceci:
input[type=checkbox] {
display: none;
}
input[type=checkbox] + *:before {
content: "";
display: inline-block;
margin: 0 0.4em;
/* Make some horizontal space. */
width: .6em;
height: .6em;
border-radius: 0.6em;
box-shadow: 0px 0px 0px .5px #888
/* An outer circle. */
;
/* No inner circle. */
background-color: #ddd;
/* Inner color. */
}
input[type=checkbox]:checked + *:before {
box-shadow: 0px 0px 0px .5px #888
/* An outer circle. */
, inset 0px 0px 0px .14em #ddd;
/* An inner circle with above inner color.*/
background-color: #444;
/* The dot color */
}<div>
<input id="check1" type="checkbox" name="check" value="check1" checked>
<label for="check1">Fake Checkbox1</label>
</div>
<div>
<input id="check2" type="checkbox" name="check" value="check2">
<label for="check2">Fake Checkbox2</label>
</div>
<div>
<input id="check2" type="radio" name="check" value="radio1" checked>
<label for="check2">Real Checkbox1</label>
</div>
<div>
<input id="check2" type="radio" name="check" value="radio2">
<label for="check2">Real Checkbox2</label>
</div>Je ne pense pas que vous puissiez faire en sorte qu'un contrôle ressemble à autre chose qu'un contrôle avec CSS.
Votre meilleur pari pour faire un bouton IMPRIMER va à une nouvelle page avec un graphique à la place du bouton radio sélectionné, puis faites un window.print () de là.