[SOLUCIONADO] Quitar fondo al dar clic en dropdown

saulrayados · #1 (**permalink**) 10/04/2020, 14:22

Hola, necesito de su ayuda, como puedo hacer para quitarle el color de fondo al dropdown cuando le doy clic?, estoy utilizando la libreria de Bootstrap y ya le pude quitar el fondo en el estado normal, pero no le puedo quitar el fondo cuando le doy clic al boton, ya intente con hover, active, select, after y sigue sin funcionar.

Código HTML:

Ver original<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
     <link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  </head>
  <body>
    <div class="menu_bar">
            <a href="#" class="bt-menu" onclick="muestra_oculta('menu')"><i class="fas fa-align-justify"></i> Menú</a>
        </div>
    
    <div class="card-header">
      <ul class="nav nav-pills card-header-pills">
        <li class="nav-item">
          <a class="nav-link" href="#">Home</a>
        </li>
        <div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Movies</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>
        <li class="nav-item">
          <a class="nav-link" href="#">Contacto</a>
        </li>
        
        <div id="search">
        <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Buscar</button>
    </form>
        </div>
        <div class="icon-user">
        <a href="#"><i class="fas fa-user"></i> Acceder</a>
      </div>
      <div class="icon-cart">
        <a href="#"><i class="fas fa-shopping-cart"></i></a>
      </div>
      </ul>
    </div>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

Código CSS:

Ver original.card-header .dropdown-toggle {
  background: none;
  border: none;
  /*color: #000;*/
}
 
.card-header .dropdown-toggle:hover {
  background: none;
  border: none;
}

prueba230683 · #2 (**permalink**) 10/04/2020, 15:37

Tienes dos opciones.

1) Añade CSS inline:

Código HTML:

Ver original<button class="btn btn-secondary dropdown-toggle" style="background:none;border: none;" type="button" data-toggle="dropdown">Movies</button>

2) Ponle un ID al botón:

Código HTML:

Ver original<button class="btn btn-secondary dropdown-toggle" id="miBoton" type="button" data-toggle="dropdown">Movies</button>

y aplica el estilo a ese ID en concreto:

Código CSS:

Ver original#miBoton {
    background: none;
    border: none;
}

El motivo por el cual esto funciona es el siguiente: https://developer.mozilla.org/es/doc..._de_selectores

Cuanto más específico sea el selector, mayor capacidad tiene para sobreescribir a otros estilos que estén siendo aplicados desde otras hojas de estilos. El selector por ID es el más específico (después del CSS inline).

saulrayados · #3 (**permalink**) 10/04/2020, 16:38

gracias, me funcionó con el ID