elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Problema con botones y los input.
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Problema con botones y los input.  (Leído 2,693 veces)
palacio29

Desconectado Desconectado

Mensajes: 103


Ver Perfil
Problema con botones y los input.
« en: 25 Junio 2020, 04:31 am »

Buenas Noches

Tengo un problema. Estoy copiando un código de un login form. El problema de este código es que asigna para todos los elementos button y los inputs un estilo particular. El problema es que tengo otros botones en mi css y que no quiero que me los cambie.
He intentado varias formas como poner una clase a los botones y los inputs nuevos, pero de alguna manera no me esta funcionando..
En definitiva el código que asigna a todo la misma clase es el siguiente.

Código
  1. /* Full-width input fields */
  2. input[type=text], input[type=password] {
  3.  width: 100%;
  4.  padding: 12px 20px;
  5.  margin: 8px 0;
  6.  display: inline-block;
  7.  border: 1px solid #ccc;
  8.  box-sizing: border-box;
  9. }
  10.  
  11. /* Set a style for all buttons */
  12. button {
  13.  background-color: #4CAF50;
  14.  color: white;
  15.  padding: 14px 20px;
  16.  border: none;
  17.  cursor: pointer;
  18.  width: 100%;
  19. }
  20.  
  21. button:hover {
  22.  opacity: 0.8;
  23. }

He intentado hacer lo siguiente, poner una clase a el elemento button

Código
  1. <button class="botoncito" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>

y luego en el css poner

Código
  1. .botoncito button {
  2.  background-color: #4CAF50;
  3.  color: white;
  4.  padding: 14px 20px;
  5.  border: none;
  6.  cursor: pointer;
  7.  width: 100%;
  8. }

Pero no sirve. Soy nuevo en esto, y lo que es que evite que ese estilo se propague por todo los botones e inputs de mi pagina.


En línea

Leguim


Desconectado Desconectado

Mensajes: 720



Ver Perfil
Re: Problema con botones y los input.
« Respuesta #1 en: 25 Junio 2020, 06:49 am »

Lo que está pasando es que le estas poniendo una clase a un botón "botoncito" hasta ahí vamos bien, pero después hace esto...

Código
  1. .botoncito button {
  2.    // [...]
  3. }
  4.  
  5. // Simplemente hace
  6. .botoncito {
  7.    // [...]
  8. }
  9.  


En línea

[u]nsigned


Desconectado Desconectado

Mensajes: 2.397

JS/Node developer


Ver Perfil WWW
Re: Problema con botones y los input.
« Respuesta #2 en: 26 Junio 2020, 18:34 pm »

A ver si te entiendo, queres aplicarle un estilo a todos tu botones e inputs de tipo text menos a los botones con la clase botoncito?
 En ese caso podrias aplicar el selector :not de css3

Código
  1. /* Full-width input fields */
  2. input[type=text], input[type=password] {
  3.  width: 100%;
  4.  padding: 12px 20px;
  5.  margin: 8px 0;
  6.  display: inline-block;
  7.  border: 1px solid #ccc;
  8.  box-sizing: border-box;
  9. }
  10.  
  11. /* Set a style for all buttons  (excepto para .botoncito) */
  12. button:not([class=botoncito]) {
  13.  background-color: #4CAF50;
  14.  color: white;
  15.  padding: 14px 20px;
  16.  border: none;
  17.  cursor: pointer;
  18.  width: 100%;
  19. }
  20.  
  21. button:hover {
  22.  opacity: 0.8;
  23. }
  24.  

Y por cierto, en el segundo caso tenes los selectores invertidos, lo correcto seria asi:

Código
  1. button.botoncito {
  2.  background-color: #4CAF50;
  3.  color: white;
  4.  padding: 14px 20px;
  5.  border: none;
  6.  cursor: pointer;
  7.  width: 100%;
  8. }
  9.  

Ejemplo online --> https://codepen.io/l-pez-faku/pen/MWKvbKQ

guia rapida sobre los selectores:

button.botoncito => aplica los estilos a todo elemento button que tenga la clase botoncito
button .botoncito => (con espacio entre ambos) aplica los estilos cualquier elemento que tenga la clase botoncito y que este dentro de un button, pero no necesariamente un hijo directo.
button > .botoncito => aplica los estilos cualquier elemento que tenga la clase botoncito y que sea un hijo directo de un button.

https://developer.mozilla.org/es/docs/Web/CSS/Selectores_CSS
https://lenguajecss.com/css/
« Última modificación: 26 Junio 2020, 18:36 pm por [u]nsigned » En línea

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines