Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Ricardo Fressa

aumentar o tamanho da bolinha do radiobutton

Por , em Desenvolvimento frontend

Recommended Posts

Gui.BAR    0

Gui.BAR
Postado

Cara, tem como. Mas pra fazer a bolinhar alterar o estado para marcado que é dificil. Teria que usar um JS.

Você poderia usar algo como isso e alterar as imagens no Photoshop.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Nao, nao tem nenhuma propriedade css nao.

você pode fazer com um replace usando Javascript..

http://lipidity.com/fancy-form/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gui.BAR    0

Gui.BAR
Postado

Nem sabia que dá pra usar CSS com Flex! :lol:

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Você pode criar algo semelhante com JavaScript, escondendo o grupo de radios e colocando em seu lugar itens que receberão animações da maneira que você desejar.

 

Você poderá criar figuras de bolinhas personalizadas, de diferentes cores, simulando Radios buttons modernos e diferentes. O grupo de radios padrão ficará escondido (como um campo hidden), mas nesse caso com o estilo » display:none.

 

O código abaixo já está comentado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Máscara em Radio Button - by Klonder</title>
<style type="text/css">
span.opcoes {cursor:pointer;}
</style>
<script type="text/javaScript">
var i;
var figObj = "<b>---»</b>";
//figObj = "<img src='bola.gif'>";

//Marque o id do item que irá iniciar checado por default:
var IniciarItem = 2;


function checaOpcao(id){
objMascaraRadio = document.getElementById("maskRadio"+id);
objRadio = document.forms["form1"].elements["time"];

//Limpando todos os spans:
for (i=0; i<objRadio.length; i++) {
	document.getElementById("maskRadio"+i).innerHTML = "";
}
//Adicionando a figura ou objeto no item selecionado:
	objMascaraRadio.innerHTML = figObj;
	objRadio[id].checked = true;
}

window.onload = function marcarDefaut() {
	objMascaraRadio = document.getElementById("maskRadio"+IniciarItem);
	objRadio = document.forms["form1"].elements["time"];
	objRadio[IniciarItem].checked = true;
	objMascaraRadio.innerHTML = figObj;
}

</script>
</head>
<body>
<form name="form1" action="pagina.php" method="get">
Qual o seu time do coração?<br>
<br>
<table width="200px" border="0">
	<tr>
		<td width="20%"><span id="maskRadio0"></span></td>
		<td><span onClick="checaOpcao(0)" class="opcoes">Palmeiras</span></td>
	</tr>
	<tr>
		<td><span id="maskRadio1"></span></td>
		<td><span onClick="checaOpcao(1)" class="opcoes">Santos</span></td>
	</tr>
	<tr>
		<td><span id="maskRadio2"></span></td>
		<td><span onClick="checaOpcao(2)" class="opcoes">Botafogo</span></td>
	</tr>
	<tr>
		<td><span id="maskRadio3"></span></td>
		<td><span onClick="checaOpcao(3)" class="opcoes">Flamengo</span></td>
	</tr>
	<tr>
		<td><span id="maskRadio4"></span></td>
		<td><span onClick="checaOpcao(4)" class="opcoes">Vitória</span></td>
	</tr>
	<tr>
		<td><span id="maskRadio5"></span></td>
		<td><span onClick="checaOpcao(5)" class="opcoes">Internacional</span></td>
	</tr>
</table>


<span style="display:none;">
<input type="radio" name="time" value="Palmeiras">Palmeiras
<br><input type="radio" name="time" value="Santos">Santos
<br><input type="radio" name="time" value="Botafogo">Botafogo
<br><input type="radio" name="time" value="Flamengo">Flamengo
<br><input type="radio" name="time" value="Vitoria">Vitória
<br><input type="radio" name="time" value="Internacional">Internacional
</span>
<br><br><input type="submit" value="Enviar via Get">
</form>

<br><br>Clique no botão enviar e veja que o valor foi enviado corretamente, via GET.
<br>Para enviar via POST, basta alterar essa opção na tag FORM.

<br><br>Você poderá substituir imagens, simulando radio buttons com efeitos CSS.

<br><br>Testado no IE7 e FF.
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito