Pouvez-vous attribuer à un bouton radio HTML l'apparence d'une case à cocher?

Question

J'ai un formulaire html que l'utilisateur devra remplir et imprimer. Une fois imprimé, ces formulaires seront envoyés par télécopieur ou par la poste à un organisme gouvernemental, et besoin de regarder assez proche comme la forme originale publiée par l'agence qu'un fonctionnaire n'a pas de tache que c'est une reproduction. Les données saisies dans le formulaire n'est pas enregistré n'importe où, ou même envoyés à un serveur web. Tout ce qui importe, c'est que nos utilisateurs peuvent facilement trouver ces formulaires sur notre site intranet et taper dans la forme pour l'impression avec leur clavier normal.

Sur l'écran, je veux laisser le bouton radio en tant que-est, à l'application et à communiquer bouton radio d'utilisation (choisissez une seule option). Cependant, quand il imprime j'en ai besoin pour imprimer avec le carré case de style plutôt que de la tour de la radio touche de style. Je sais comment utiliser un sélecteur de données multimédia pour définir des styles pour l'impression que, si ce n'est pas la question. C'est juste que je ne sais pas si je peux le style de la radio bouton comme je veux à tous.

Si je ne peux pas obtenir ce travail, je vais devoir créer une case à cocher à l'ombre de chaque bouton radio, l'utilisation de javascript pour garder les cases à cocher et les boutons radio de synchronisation, et le css pour montrer celui que j'ai intéressent dans la bonne moyenne. Évidemment, si je peux juste le style, il permettrait d'économiser beaucoup de travail.

Answer 1

Trois ans après cette question est posté et c'est presque à portée de main. En fait, il est complètement réalisable dans Firefox 1+, Chrome 1+ et Safari 3+ en utilisant le CSS3 appearance de la propriété:

input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    -ms-appearance: checkbox;     /* not currently supported */
    -o-appearance: checkbox;      /* not currently supported */
}

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

Le résultat est radio-éléments qui ressemblent à des cases à cocher. IE 10 mai soutien de cela, et peut-être de l'Opéra de 12 trop (à noter: aucun de leurs pré-versions bêta de la soutenir).

Démo

Remarque: cette a finalement été abandonnée à partir de la spécification CSS 3 en raison d'un manque de soutien et de conformité des fournisseurs. Je le recommande à l'encontre de la mise en œuvre, sauf si vous avez seulement besoin de soutien Webkit ou les navigateurs basés sur Gecko.

Answer 2

Ceci est ma solution en utilisant uniquement CSS (Jsfiddle: http://jsfiddle.net/xykPT/ ).

HTML

 <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>
 

CSS

 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;
}
 

Answer 3

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.

Answer 4

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 () à partir de là.

Answer 5

Très simple idée d'utiliser un tableau et pas de Javascript. Suis-je trop simpliste?

 <style type="text/css" media="screen">
#ageBox {display: none;}
</style>

<style type="text/css" media="print">
#ageButton {display: none;}
</style>

<tr><td>Age:</td>

<td id="ageButton">
<input type="radio" name="userAge" value="18-24">18-24
<input type="radio" name="userAge" value="25-34">25-34

<td id="ageBox">
<input type="checkbox">18-24
<input type="checkbox">25-34

</td></tr>