• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Gooden

Radio to button

6 mensagens neste tópico

People ajudem-me aqui. ja procurei e esta dificil encontrar....

tenho um radio button

<input type="radio" name="XPTO">

quero que ele tenha um aspecto de botão. como faço isso através de css?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

digamos que era algo como um input do type radio mas o aspecto ser button. ....

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não fazes. Os elementos de forms são notoriamente difíceis de modificar (especialmente em Firefox), o que queres fazer simplesmente não é possível.

O que é possível, é esqueceres de vez o radio e o button, e recorrendo á javascript com fartura e algum CSS, construir um elemento que se comporte como queres.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Não fazes. Os elementos de forms são notoriamente difíceis de modificar (especialmente em Firefox), o que queres fazer simplesmente não é possível.

O que é possível, é esqueceres de vez o radio e o button, e recorrendo á javascript com fartura e algum CSS, construir um elemento que se comporte como queres.

Not true.

Se usares javascript, podes por uma div qualquer, ou botão, ou o que quiseres, a servir de "trigger" para o estado da radio button. Metes a radio button como oculta e crias o resto do código como quiseres.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Pois exactamente, vai de encontro ao que mencionei: o radio em si não se consegue "estilar" para ter aspecto de botão. Mas sim, a tua explicação é mais óbvia do que a minha..! Não me tinha lembrado disso, de simplesmente ocultar o radio button..!

Se bem que para o efeito pretendido, que suponho ser implementar um "toggle button" (ou está "normal", ou está "premido para dentro"), o radio button é acessório, apenas irá conter o valor do campo a ser enviado aquando do submit. Assumindo que seja essa a funcionalidade pretendida, uma forma de pegar no problema seria esta:

-Usar um elemento para fazer de botão, por exemplo um <span>;

-Criar o CSS adequado para ele realmente parecer um botão, havendo uma class para o estado "normal", e outra para o estado "premido";

-Evento onclick dispara uma função que muda o radio (checked/unchecked) e a class CSS do span para valores adequados;

--Visto que queremos copiar o comportamento de um radio, que só pode ter um elemento checked para cada conjunto, temos de correr todos os outros spans (do mesmo conjunto) e alterar consequentemente a class CSS;

e basicamente penso que será isso, de uma forma muito simples.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora