HTML - radio button con botones en vez de circulitos

 
Vista:
sin imagen de perfil
Val: 48
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

radio button con botones en vez de circulitos

Publicado por jose luis (17 intervenciones) el 13/08/2020 18:05:26
hola, queria la misma funcion que hace un radiobutton pero en vez de circulitos queria ponerle botones grandes. Algo asi como esto de la imagen, en el apartado "citas dispoñibles": https://postimg.cc/0M2GXdPP
¿se puede hacer?
un saludo.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
-1
Responder
Imágen de perfil de Lopez
Val: 810
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

radio button con botones en vez de circulitos

Publicado por Lopez (256 intervenciones) el 13/08/2020 18:49:13
jose luis,

Imagino algo asi es lo que buscas.
https://thestizmedia.com/radio-buttons-as-toggle-buttons-with-css/

Incluye un demo, para que copies y pegues el codigo
con bootstrap creo ya viene incluido ese estilo para radios.

Quedamos atentos,
Saludos!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 48
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

radio button con botones en vez de circulitos

Publicado por jose luis (17 intervenciones) el 16/08/2020 00:21:35
van bien, solo que al ponerlos en el echo dentro del for me los pone en vertical, cuando yo queria ponerlos en horizontal (tal y como estan en el ejemplo que me mandaste). Asi los tengo: https://postimg.cc/JHLrdzrf
y el codigo que tengo es este:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Cita previa Ajax</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="ajax.js"></script>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
</head>
<body>
<?php
$hoy=getdate();
$dias=new DateTime($hoy["year"]."-".$hoy["mon"]."-".$hoy["mday"]."T00:00:00");
?>
<div class="contenedor">
<div class="dias">
<form  method="post" id="formulario">
<?php
for ($i=0;$i<=7;$i++)
{
    echo("<div class='switch-field'>
        <input type='radio' id='".$dias->format('Y-m-d')."' name='dia' value='".$dias->format('Y-m-d')."'/>
        <label for='".$dias->format('Y-m-d')."'>".$dias->format('Y-m-d')."</label>
        </div>");
 
    $dias->modify('+'.'1'.' day');
}
?>
<input type="button" id='solicitar' value='Solicitar Cita'>
</form>
</div>
<div id="horas" class="horas">
 
</div>
</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Lopez
Val: 810
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

radio button con botones en vez de circulitos

Publicado por Lopez (256 intervenciones) el 16/08/2020 17:02:33
Hola jose luis,

Imagino pueden ser reglas en tu CSS.
Te recomiendo revisarlo ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 48
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

radio button con botones en vez de circulitos

Publicado por jose luis (17 intervenciones) el 16/08/2020 17:22:26
ya lo he resuelto poniendo el <div class="switch-field"> fuera del for. Pero ahora tengo el problema contrario puesto que quiero ponerlos de dos en dos y le pongo el <br> y no me funciona:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Cita previa Ajax</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="ajax.js"></script>
<LINK REL=StyleSheet HREF="estilos.css" TYPE="text/css">
</head>
<body>
<?php
$hoy=getdate();
//echo $hoy["mday"];
$dias=new DateTime($hoy["year"]."-".$hoy["mon"]."-".$hoy["mday"]."T00:00:00");
//$dias->modify('+'.'1'.' day');
//echo $dias->format('Y-m-d');
?>
 
<div class="contenedor">
<div class="dias">
<form  method="post" id="formulario">
  <div class='switch-field'>
<?php
for ($i=0;$i<=7;$i++)
{
     echo("<input type='radio' id='".$dias->format('Y-m-d')."' name='dia' value='".$dias->format('Y-m-d')."'/>
           <label for='".$dias->format('Y-m-d')."'>".$dias->format('Y-m-d')."</label>");
     if($i%2==0)
     {
          echo ("<br>");
     }
    $dias->modify('+'.'1'.' day');
}
?>
</div>
<input type="button" id='solicitar' value='Solicitar Cita'>
</form>
</div>
<div id="horas" class="horas">
 
</div>
</div>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 48
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

radio button con botones en vez de circulitos

Publicado por jose luis (17 intervenciones) el 16/08/2020 20:37:57
al final lo resolvi metiendo todo en una tabla:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<table>
<?php
$n_columnas=3;
for ($i=0;$i<=20;$i+=$n_columnas)
{
    echo("<tr>");
    for($j=0;$j<=$n_columnas;$j++)
    {
 
     echo("<td>");
     echo("<div class='switch-field'>");
     echo("<input type='radio' id='".$dias->format('Y-m-d')."' name='dia' value='".$dias->format('Y-m-d')."'/>
           <label for='".$dias->format('Y-m-d')."'>".$dias->format('Y-m-d')."</label>");
     echo("</div>");
     echo("</td>");
 
    $dias->modify('+'.'1'.' day');
    }
    echo("</tr>");
}
?>
</table>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar