Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: palacio29 en 25 Junio 2020, 04:31



Título: Problema con botones y los input.
Publicado por: palacio29 en 25 Junio 2020, 04:31
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.


Título: Re: Problema con botones y los input.
Publicado por: MiguelCanellas en 25 Junio 2020, 06:49
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.  


Título: Re: Problema con botones y los input.
Publicado por: [u]nsigned en 26 Junio 2020, 18:34
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/