Personalizzazione pulsanti Radio nei form

**Milver** · 21-06-2013, 22:44

Salve ragazzi, non so se sono nella sezione giusta perchè magari si tratta di CSS ma ho il seguente problema: ho creato un form e mi occorre il "radio", ovvero di dare la possibilità a chi compila il form di scegliere solo una tra tutte le opzioni.
Il problema è che il cliente mi ha chiesto di non mettere il semplice pallino che appare quando c'è il type="radio" ma di mettere pulsanti tipo immagine con la scritta dentro (immaginate un rettangolo colorato con la scritta). Ad esempio se il pulsante è azzurro quando viene pigiato diventa verde, poi se pigiano un'altra opzione si deseleziona quel pulsante che torna azzurro e diventa verde un altro pulsante..spero sia stato chiaro ciò che desidero fare..mi aiutate? c'è un modo per fare questa cosa?

Grazie mille

**Vincent.Zeno** · 21-06-2013, 23:39

se tratta di giochilli javascript (sezione nella quale ti sposto)

**Nobody33** · 22-06-2013, 00:51

ovvero di dare la possibilità a chi compila il form di scegliere solo una tra tutte le opzioni.

Trovo i <select> molto più eleganti e le le possibilità di implementarli è molto + vasto che un radio.

In ogni caso, se nonostante tutto vuoi le radio, vai QUI che hai 100 modi di farlo con i .css

**Vincent.Zeno** · 22-06-2013, 00:57

Originariamente inviato da Nobody33
In ogni caso, se nonostante tutto vuoi le radio, vai [*URL=https://www.google.com/search?q=styling+radio+buttons&ie=utf-8&oe=utf-8&aq=t]QUI[/URL] che hai 100 modi di farlo con i .css

sono io che non ho capito cosa intendeva Milver?
l'esempio che hai riportato mi sembra di altro tipo

**cavicchiandrea** · 22-06-2013, 01:24

http://webandylab.altervista.org/radiografic.php

**Nobody33** · 22-06-2013, 01:26

sono io che non ho capito cosa intendeva Milver?

...#$%$, hai ragione @vincent, allora sta cercando qualcosa come QUESTO.

in ogni caso, credo che basta css3, con retrocompatibilità (tipo css pie)

codice:

-webkit-appearance: button; 
-moz-appearance: button; 
-o-appearance: button; 
-ms-appearance: button; 
appearance: button;

e foorse un minimo di js.

**Vincent.Zeno** · 22-06-2013, 01:40

quindi Milver sarà contento: ora ha soluzioni sia con che senza js

(ridatemi il thread

)

**Milver** · 22-06-2013, 14:01

Originariamente inviato da cavicchiandrea
http://webandylab.altervista.org/radiografic.php

E' questo che intendevo..dove posso leggere come si fa?

**cavicchiandrea** · 22-06-2013, 14:13

Originariamente inviato da Milver
E' questo che intendevo..dove posso leggere come si fa?

Non esistono tutorial per queste cose, nel sorgette pagina trovi tutto (formalmente è free) poi se ritieni meritevole una donazione per l'impegno ti ringrazio.

**carlomarx** · 22-06-2013, 16:03

il modo più semplice è in puro CSS...:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento HTML</title>
<style type="text/css">
	input[type="radio"] {
		display: none;
	}

	input[type="radio"] + label:before {
		content: url("unchecked.png");
		margin-right: 12px;
	}

	input[type="radio"]:checked + label:before {
		content: url("checked.png");
	}
</style>
</head>
 
<body>

<form name="tuoForm">

	


		<input type="radio" name="tuoCampo" value="uno" id="radio-uno"><label for="radio-uno">uno</label>

		<input type="radio" name="tuoCampo" value="due" id="radio-due"><label for="radio-due">due</label>

		<input type="radio" name="tuoCampo" value="tre" id="radio-tre"><label for="radio-tre">tre</label>

		<input type="radio" name="tuoCampo" value="quattro" id="radio-quattro"><label for="radio-quattro">quattro</label>
	</p>

</form>

</body>
</html>

Sostituisci checked.png e unchecked.png con le tue immagini.

Discussione: Personalizzazione pulsanti Radio nei form

Strumenti discussione

Ricerca discussione

Visualizza

Personalizzazione pulsanti Radio nei form

Permessi di invio