Jump to content
Sign in to follow this  
Gooden

Radio to button

Recommended Posts

Gooden

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?

Share this post


Link to post
Share on other sites
scorch

De botão como? Um input tipo submit normal?


scorch_pp.png

PS: Não respondo a perguntas por mensagem que podem ser respondidas no fórum.

Share this post


Link to post
Share on other sites
jreis

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.


"Pensa positivo: tudo pode piorar"

Share this post


Link to post
Share on other sites
yoda

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.

Share this post


Link to post
Share on other sites
jreis

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.


"Pensa positivo: tudo pode piorar"

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.