Grafica <input type=radio>

**simona84** · 08-01-2009, 15:41

Come faccio a cambiare la grafica di un radio button?

Ho 10 input radio uno affianco all'altro con associato un numero, appunto da 1 a 10.

Vorrei non vedere il tipico pallino e al suo posto uno sfondo colorato, un'immagine insomma, con sopra il numero associato.

Si può fare?

Altrimenti anche con le check box...

L'importante è che io abbia una specie di cartella della tombola, quindi una tabella, con dei numeri (però sotto deve esserci qualcosa di cliccabile da inviare con un POST.

**Enzo (Strayst.)** · 08-01-2009, 18:17

Sulla via di INPUT TYPE="Button" (vedi in calce).

Premetto per la cronaca, che avevo scoperto si può fare con SELECT ma non background-image: ; solo background: ; nella forma:

codice:

<select style="width: 100px; height: 100px; background: url(http://forum.html.it/forum/images/go.gif) no-repeat 25px center;">

<option>
<option>1
<option>2
<option>3

</select>

Applicabile anche alle singole OPTION.

Però, o immagine, o colore di sfondo; non entrambi come è invece fattibile con altri Elementi (con DIV per esempio). A meno che non fai la SELECT con l' Attributo SIZE="un numero" allora sì, accetta entrambi:

codice:

<select size="7" style="width: 100px; height: 100px; 
    background: #A0A000 url(http://forum.html.it/forum/images/go.gif) no-repeat 25px center;">

<option>
<option>1
<option>2
<option>3

</select>

Ed accetta pure la forma coi singoli:
background-color: #A0A000; background-image: url(http://forum.html.it/forum/images/go.gif); background-repeat: no-repeat; background-position: 25px center;

Ma non ho trovato equivalenti per RADIO.

Originariamente inviato da simona84
Altrimenti anche con le check box...

Altrimenti anche con i pulsanti BUTTON. Questo è fattibile:

codice:

<input name="group" value="3" type="button" 
   style="width: ; height: ; 
          background: #EFA0A0 url(http://forum.html.it/forum/images/go.gif) no-repeat center center; 
          color: black; font-size: 40px; padding: ;"
          onclick='someFunction();'
>

Ti potrebbe servire padding: ; a 0px od altri valori; riguarda il contenuto 3 in value="3" ed a che distanza lo mantiene dal bordo del pulsante.
width: ; height: ; se specificate e sovrabbondanti, rendono ininfluente il padding: ; .
Anche border: 0; o border: 2px solid red; sono interessanti.

Poi i pulsanti vanno accompagnati con uno SCRIPT che li renda mutually exclusive come i RADIO.

**Enzo (Strayst.)** · 09-01-2009, 02:55

I radio button per agire in modo esclusivo l' uno dell' altro, devono essere accompagnati dall' Attributo name="" con identico Valore; si possono quindi avere più gruppi indipendenti di radio button nella stessa pagina o nello stesso form .

Lasciati anonimi, si comportano alla stregua di checkbox in quanto ne possono rimanere selzionati più d' uno, ma a differenza di questi non possono venire deselezionati col mouse: si deve ricaricare la pagina.

Rimanendomi ancora indefinite le tue precise necessità, ti posto un modulo dove 10 radio button vengono selezionati dall' Utente tramite una pulsantiera di altrettanti 10 input type="button" che rispondono al tuo requisito del numero associato e dell' immagine di sfondo.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Buttons to Radio-buttons</title>

<script type="text/javascript">

    var taken = 0;

function take(which){

 document.field.group[which-1].checked = true;

 document.field.btn[taken].style.border = "4px solid #EFEF60";
 document.field.btn[taken].style.color  = "#EFEF60";

        taken = which-1;

 document.field.btn[taken].style.border = "4px solid red";
 document.field.btn[taken].style.color  = "red";

 }

</script>

<style type="text/css">

input.board {
 width : 120px;
 height: 120px;
 background: url(http://i42.tinypic.com/2v2z2ag.jpg) no-repeat center center;
 color: #EFEF60;
 font-family: Trebuchet MS, Helvetica, Arial;
 font-size: 40px;
 padding-top: ;
 border: 4px solid #EFEF60;
 text-align: ;
 }
</style>

</head>
<body bgcolor="#404040" text="EFEFEF">

<div align="center">
            



<form name="field">
<table border="0" cellpadding="0" cellspacing="0"><tr>
<td>

<div style="border: 4px solid #EFEF60;">
<table border="0" cellpadding="0" cellspacing="0"><tr>
 <td><input name="btn" class="board" value="1"  type="button" onclick='take("1" );'></td>
 <td><input name="btn" class="board" value="2"  type="button" onclick='take("2" );'></td>
 <td><input name="btn" class="board" value="3"  type="button" onclick='take("3" );'></td>
 <td><input name="btn" class="board" value="4"  type="button" onclick='take("4" );'></td>
 <td><input name="btn" class="board" value="5"  type="button" onclick='take("5" );'></td>
 </tr><tr>
 <td><input name="btn" class="board" value="6"  type="button" onclick='take("6" );'></td>
 <td><input name="btn" class="board" value="7"  type="button" onclick='take("7" );'></td>
 <td><input name="btn" class="board" value="8"  type="button" onclick='take("8" );'></td>
 <td><input name="btn" class="board" value="9"  type="button" onclick='take("9" );'></td>
 <td><input name="btn" class="board" value="10" type="button" onclick='take("10");'></td>
 </tr>
</table>
</div>

</td>
</tr><tr>
<td>
            


<tt>&#60;div style="display: none;"&#62;</tt> &#160; Assegnare <tt>none</tt> al DIV per nascondere i RADIO.

<div style="display: ; border: 1px dashed black;"> 
<table border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr align="center" valign="middle">
 <td><input name="group" value="1"  type="radio"></td>
 <td><input name="group" value="2"  type="radio"></td>
 <td><input name="group" value="3"  type="radio"></td>
 <td><input name="group" value="4"  type="radio"></td>
 <td><input name="group" value="5"  type="radio"></td>
 </tr><tr align="center" valign="middle">
 <td><input name="group" value="6"  type="radio"></td>
 <td><input name="group" value="7"  type="radio"></td>
 <td><input name="group" value="8"  type="radio"></td>
 <td><input name="group" value="9"  type="radio"></td>
 <td><input name="group" value="10" type="radio"></td>
 </tr>
</table>
</div>

</td></tr>
</table>
</form>

</div>


</body>
</html>

**simona84** · 09-01-2009, 15:29

Perfetto.
Grazie mille per i tuoi consigli, non ho ancora letto il codice del 2° post ma è quello che dovrebbe fare al mio caso!!!

Speriamo vada bene!!

Ciao

Discussione: Grafica <input type=radio>

Strumenti discussione

Ricerca discussione

Visualizza

Grafica <input type=radio>

... invenzioni femminili

named or unnamed radio-button

Permessi di invio