Ayuda: Eliminar las clases CSS por defecto

Iniciado por JonaLamper, 17 Agosto 2016, 16:31 PM

0 Miembros y 1 Visitante están viendo este tema.

JonaLamper

Buenas,

Tengo una situación algo así:

Código (html4strict) [Seleccionar]
<div class="miclase">
 <p>Aqui puedes hacer retos para ganar premios</p>
 <button>De acuerdo</button>
</div>


Y a través de CSS le estoy dando estilo a todo el div. El problema es que el botón no me está cogiendo el estilo porque se está aplicando el CSS por defecto para un botón (es decir, me aparece el típico botón gris por defecto). Entonces, quisiera que mi estilo del div afectase también a mi botón.

Os dejo una foto donde se ve perfectamente:



¿Alguien sabe cómo solucionarlo?  ;D
Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.

z3nth10n

Buenas JonaLamper,

muy sencillo. Con solo modificar los atributos background-color y border ya puedes hacer de casi todo a tu botón.

No se si se trata de una trampa pero en tu imagen no veo nada relevante, más bien parece que el botón ha desaparecido :laugh:

De todas formas, aquí tienes un ejemplo:

https://jsfiddle.net/ogbnfy5x/

Como ves, el botón parece texto... Pero, ops, parece que me he equivocado Ikillnukes, aún se sigue viendo el border azul por defecto de algunos navegadores al hacer click, en ese caso, solo es añadirle otro atributo llamado outline.

Código (css) [Seleccionar]
outline: none;

Esa es la solución.

Un saludo.

Interesados hablad por Discord.

JonaLamper

Gracias.

Prueba a hacer click en la imagen  :)
Utilizar palabras para hablar de palabras es como utilizar un lápiz para hacer un dibujo de ese lápiz sobre el mismo lápiz.

[u]nsigned

Cada navegador tiene sus propios 'estilos' por defecto.

Para anular este comportamiento y tener un site homogéneo en todos los browser, lo mejor es usar Normalize.css

Lo que hace es 'resetear' todos los estilos para que se vean igual en todos los navegadores.

No hay atajo ante la duda, el misterio se hace aquí...
Se hace carne en cada uno, el misterio es existir!

WHK

#4
Facil, en tu hoja de estilo donde dice ".miclase{..." ponle ".miclase, .miclase button{..." eso hará que el estilo de .miclase también afecte a button dentro de la clase "miclase" debido a que hereda.

De todas maneras eso es una muy mala práctica, normalmente debe haber un estilo para la division y otra para el boton y ambos con estilos distintos, si quieres que el boton tenga el mismo color de fondo que la division entonces debes darle un background-color transparent al igual que la propiedad border. y hacer esto para estado normal, :hover, :pressed, :focus y :active, recuerda que para cada estado un botón tiene diferentes estilos.

Saludos.