html - 更改下拉菜单的宽度

Question

我正在为一个小元素使用引导按钮。我已将按钮的颜色从默认的蓝色更改为深灰色。字体为白色。单击按钮并将鼠标从按钮上移开后，文本颜色变为深灰色/黑色。

我试过用 .btn:active 覆盖 bootstrap 麦粒肿，但这似乎不起作用。任何方向都很好。

  <style>
    * {
       border-radius: 0 !important;
    }

    .btn{
      background-color: #282828 ;
      width: 250px;
      text-align: left;
      color: white;
    }

    .btn:hover {
      background-color: #282828 ;
      color: white;
    }

    .btn:active {
      color: white !important;
    }

    .caret {
      float: right;
    }

    .dropdown-menu {
    width: 250px;
    }

   .dropdown-menu li a:hover {
    position: relative;
    background: #51aecc;
    color: white;
}

<div class="dropdown">
    <button class="btn btn-custom dropdown-toggle" type="button" data-toggle="dropdown">Select Language
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">Romania</a></li>
      <li><a href="#">Espana</a></li>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">United States</a></li>
      <li><a href="#">Deutschland</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">Nederland</a></li>
    </ul>
  </div

Answer 1

您要覆盖的样式是:

.btn:focus{
   color: #FFF
}

fiddle :https://jsfiddle.net/rvzd7rtq/