更改下拉菜单的宽度

Question

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

我已尝试用.btn：激活覆盖bootstrap stye，但这似乎不起作用。任何方向都会很棒。

  <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
}

小提琴：https://jsfiddle.net/rvzd7rtq/