Question

这是我的代码，我希望下拉列表不要用灰色阴影显示，而是要突出显示与导航栏上其他链接类似的颜色。

li {
  text-align: center;
}

.dropdown-toggle {
  background-color: white;
  color: #0066ff;
  border-color: white;
}

.dropdown-toggle:hover {
  background-color: white;
  border-color: white;
  color: #0033cc;
}

.dropdown-toggle:active {
  background-color: white;
  border-color: white;
  color: #0033cc;
  box-shadow: none;
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>

<body>
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link active" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <div class="btn-group dropright">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Desktops
            </button>
        <div class="dropdown-menu">

        </div>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="contact.html">Contact</a>
    </li>

  </ul>
</body>

</html>

我调整了顶部的bootstrap样式，并且尝试使用.dropdown-toggle：active

失败了

Answer 1

我想到了这个...不确定这是否是您要的。

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

</head>
<style>
  li {
    text-align: center;
  }
  
  .dropdown-toggle {
    background-color: white;
    color: #0066ff;
    border-color: white;
  }
  
  .dropdown-toggle:hover {
    background-color: white;
    border-color: white;
    color: #0033cc;
  }
  
  .dropdown-toggle:active {
    background-color: white;
    border-color: white;
    color: #0033cc;
    box-shadow: none;
  }
  
  #button_desktop:focus {
    background-color: white;
    color: #0033cc;
    outline: none;
    border: none;
    box-shadow: none;
  }
</style>

<body>
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link active" href="index.html">Home</a>
    </li>
    <li class="nav-item">
      <div class="btn-group dropright">
        <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="button_desktop">
              Desktops
            </button>
        <div class="dropdown-menu">

        </div>
      </div>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="contact.html">Contact</a>
    </li>

  </ul>
</body>

</html>

祝你有美好的一天！

Answer 2

这对我有用。尝试

.dropdown-toggle:active, .open .dropdown-toggle, dropdown-toggle:hover{ background:white !important; color:#000 !important; box-shadow:#000 important!;}
.dropdown-toggle[aria-expanded="true"] { background:#FFF !important; color:#000 !important; border-color:#fff important!; box-shadow:#fff important!;}

点击更改颜色的按钮

2 个答案: