Bootstrap 3删除悬停输入样式

Question

我有一个简单的输入，我在尝试删除悬停/活动样式时遇到问题。

在下图中，我正在尝试删除单击时添加的灰色背景/轻微边框。我只是希望它是白色的，当点击或盘旋时没有任何改变。

这是一个小提琴：https://jsfiddle.net/carlhussey/tfrpncu7/6/

<div class="input-group-btn">
    <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span> <span class="sr-only">Toggle Dropdown</span> 
</button>

.dropdown-menu>li>a:focus,
.dropdown-menu>li>a:hover {
  background-color: transparent; /* Fix for dropdown-menu item hover background-color */
}

.filterOptions:hover,
.filterOptions:active{
  background-color: white;
  border-color: #ccc;
}

Answer 1

尝试：

.input-group .dropdown-toggle.filterOptions {
    background: #fff!important;
}

Answer 2

如果您打开DevTools并执行下拉按钮，您会看到事件触发，只要.open被添加到input-group-btn课程，您可以根据需要进行过度训练。

工作示例：

.div-cntr {
  margin-top: 100px;
  text-align: center;
  max-width: 700px;
  /*for example only*/
  background: red;
  min-height: 300px;
  /*for example only*/
}
.form .open>.dropdown-toggle.filterOptions.focus,
.form .open>.dropdown-toggle.filterOptions:focus,
.form .open>.dropdown-toggle.filterOptions:hover .input-group-lg>.form-control,
.form .input-group.input-group-lg>.input-group-btn>.filterOptions {
  border: 1px solid #ccc;
  border-left: 0;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  background: #fff;
}
.form .dropdown-menu.dropdown-menu-search {
  top: 60px;
  right: 110px;
  border-radius: 0;
  border: 0;
  background: #fff;
}
.form .dropdown-menu.dropdown-menu-search:after {
  top: -15px;
  right: 10px;
  position: absolute;
  content: '';
  border-width: 0px 15px 15px 15px;
  border-style: solid;
  border-color: #fff transparent;
  height: 0;
  width: 0;
}
.form .form-control.toolSearch,
.form .form-control.toolSearch:focus {
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  border: 1px solid #ccc;
  border-right: 0;
}
.form .input-group-btn .btn.btn-search,
.form .input-group-btn .btn.btn-search.active {
  border-radius: 0;
  border: 1px solid #ccc;
  border-left: 0;
}
.form .input-group-btn .btn.btn-search:hover,
.form .input-group-btn .btn-search:focus {
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border: 1px solid #ccc;
  border-left: 0;
  border-radius: 0;
  background: #fff;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container div-cntr">
  <div class="form-group form">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control toolSearch" id="toolSearch" name="toolSearch" placeholder="What are you looking for?">
      <div class="input-group-btn">
        <button aria-expanded="false" aria-haspopup="true" data-toggle="dropdown" class="btn btn-default btn-lg dropdown-toggle filterOptions" type="button"> <span class="caret"></span>  <span class="sr-only">Toggle Dropdown</span> 
        </button>
        <ul class="dropdown-menu dropdown-menu-right dropdown-menu-search">
          <li>
            <a href="#" class="small" data-value="option1" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 1</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option2" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 2</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option3" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 3</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option4" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 4</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option5" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 5</a>
          </li>
          <li>
            <a href="#" class="small" data-value="option6" tabIndex="-1">
              <input type="checkbox" />&nbsp;Option 6</a>
          </li>
        </ul>
        <button role="button" class="btn btn-lg btn-default btn-search"><span class="glyphicon glyphicon-search"></span> Search</button>
      </div>
    </div>
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 3

.btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .open>.dropdown-toggle.btn-default:hover{
    background-color: transparent;
}

尝试以上代码

Answer 4

这是小提琴 https://jsfiddle.net/6qbteca6/

.dropdown-menu {
  right: 0;
  left: auto;
}

.input-group .dropdown-toggle.filterOptions {
  border-left: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 5; /* Fix for 2 input-group-btns and this one not being the last-child */
}
.input-group .dropdown-toggle.filterOptions{
  background:none !important;
  border-color:#ccc !important;
}
.filterOptions:hover,
.filterOptions:active{
  background-color: white;
  border-color: #ccc;
}

Answer 5

尝试添加此css

.filterOptions:active, .open > .dropdown-toggle.btn-default {
  background-color: transparent !important;
  border-color: #ccc !important;
}