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.
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
He intentado hacer lo siguiente, poner una clase a el elemento button
<button class="botoncito" onclick="document.getElementById('id01').style.display='block'" style="width:auto;">Login</button>
y luego en el css poner
.botoncito button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}
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.
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...
.botoncito button {
// [...]
}
// Simplemente hace
.botoncito {
// [...]
}
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
/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Set a style for all buttons (excepto para .botoncito) */
button:not([class=botoncito]) {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
Y por cierto, en el segundo caso tenes los selectores invertidos, lo correcto seria asi:
button.botoncito {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
border: none;
cursor: pointer;
width: 100%;
}
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/