CSS - Como mantener activo un input type submit con css

 
Vista:
Imágen de perfil de MAS82
Val: 46
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por MAS82 (22 intervenciones) el 02/03/2019 12:17:33
hola a todos. quisiera por favor me ayuden a encontrar la forma de que mediante CSS se pueda mantener activo un botón input type submit una vez presionado; es decir darle la apariencia de un input type button. gracias de antemano
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por xve (489 intervenciones) el 02/03/2019 13:30:29
No entiendo tu pregunta... puedes comentarlo con mas detalle?
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 MAS82
Val: 46
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por MAS82 (22 intervenciones) el 02/03/2019 17:12:26
hola tengo este form el cual tiene un input de tipo submit. lo que requiero es que este boton submit se comporte como un input tipo button; es decir que se quede activo una vez echo clic en el ya sea como active/focus o como hover. te agradesco por responder

1
2
3
4
5
<form method="post">
 
<input type="submit"  value="Mesa1" name="mesas"/>
 
</form>
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 xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por xve (489 intervenciones) el 02/03/2019 19:19:56
Pero si haces click en el submit te enviara el formulario, y recargara la pagina, no? o quieres que al recargar la pagina te ponga el foco en el botón?
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 MAS82
Val: 46
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por MAS82 (22 intervenciones) el 02/03/2019 23:07:13
si justo por eso necesito que sea un submit para pasar parámetros pero sin que pierda el foco al recargar la pagina
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 xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por xve (489 intervenciones) el 03/03/2019 09:09:32
Ah, ok... ahora entiendo... utiliza el focus() de javascript... algo así:

1
2
3
4
5
6
7
8
9
<form method="post">
 
<input type="submit"  value="Mesa1" name="mesas"/>
 
</form>
 
<script>
document.querySelector("input[type=submit]").focus();
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de ScriptShow
Val: 410
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por ScriptShow (103 intervenciones) el 03/03/2019 12:44:16
Una sencilla y útil idea para estos y otros casos. Hay que tomar nota.

Un saludo
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 MAS82
Val: 46
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por MAS82 (22 intervenciones) el 04/03/2019 04:00:55
no logro mantener el foco tendría que agregar algo mas al código ??
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 xve
Val: 630
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por xve (489 intervenciones) el 04/03/2019 11:39:40
No, con eso solo a mi me funciona!!!
Si copias solo ese código en un archivo html te funcionara!!

Abria que ver el resto de tu código, no vaya ha haber algo que no deje que funcione correctamente
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 MAS82
Val: 46
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por MAS82 (22 intervenciones) el 04/03/2019 13:30:18
disculpa no me exprese bien; es decir si funciona me mantiene enfocado el boton; pero probé agregando mas botones y el foco solo se mantiene en el primer boton, estoy intentando hacer un tablero de mesas para una fonda y voy a requerir de mas de un boton, el funcionamiento seria que al darle click en un boton "mesa" me lo enfoque, pero una vez hecho click en otro boton pase el foco a este y se lo quite al anterior clicado.
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 ScriptShow
Val: 410
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por ScriptShow (103 intervenciones) el 04/03/2019 14:30:06
Saludos,

en CSS podemos adaptar algo simple:

https://www.lawebdelprogramador.com/codigo/CSS/4419-Menu-CSS-Focus-Hover-Efectos.html

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de MAS82
Val: 46
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por MAS82 (22 intervenciones) el 05/03/2019 17:51:30
exacto esto es lo que busco pero se podrá aplicar esos css a un input en lugar del href ? par lograr pasar parámetros
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 MAS82
Val: 46
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por MAS82 (22 intervenciones) el 05/03/2019 20:29:46
pero condicionar el color fijo en este caso el color que en el ejemplo es blanco seria verde que es el color cuando la mesa esta disponible y rojo cuando la mesa esta ocupada
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 ScriptShow
Val: 410
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por ScriptShow (103 intervenciones) el 06/03/2019 12:08:13
Saludos,

un ejemplo adaptable en CSS sería:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
 
<html>
<body>
<style>
.mesas input {background:#00FF00;color:#000000;margin:2px;padding:24px}
.mesas input:hover {background:#00FF00;outline:none;transition:all .4s}
.mesas input:focus {background:#FF0000;outline:none;transition:all .4s}
</style>
 
<form class="mesas">
<input type="button" value="Mesa 1" onclick="javascript:this.focus()">
<input type="button" value="Mesa 2" onclick="javascript:this.focus()">
<input type="button" value="Mesa 3" onclick="javascript:this.focus()">
<input type="button" value="Mesa 4" onclick="javascript:this.focus()">
<br>
<input type="button" value="Mesa 5" onclick="javascript:this.focus()">
<input type="button" value="Mesa 6" onclick="javascript:this.focus()">
<input type="button" value="Mesa 7" onclick="javascript:this.focus()">
<input type="button" value="Mesa 8" onclick="javascript:this.focus()">
</form>
</body>
</html>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de MAS82
Val: 46
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por MAS82 (22 intervenciones) el 06/03/2019 20:40:32
realmente si me es útil y te agradezco la ayuda, y si no fuera mucha molestia quisiera que me ayudes en algo mas:

- el primer color esta bien por defecto es verde; pero quisiera que el color rojo se aplique cumpliendo una condición.

- y como puedo enviar parámetros con el tipo de input button del ejemplo anterior.
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 ScriptShow
Val: 410
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por ScriptShow (103 intervenciones) el 09/03/2019 10:48:12
Saludos,

para lo que indicas, tendrás que utilizar JavaScript, Ajax y Php. Traslada el código que te sirva al Foro de Php. Explica con detalle todo lo que quieres hacer. L@s que entienden de lenguajes interpretados en el servidor, te echarán una mano con el código final.

Espero que vaya bien, que consigas buenos resultados.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de MAS82
Val: 46
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Como mantener activo un input type submit con css

Publicado por MAS82 (22 intervenciones) el 09/03/2019 12:54:48
gracias...
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