CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
SBB
SBB

Reputation: 8990

Bootstrap 3 remove hover input styling

I have a simple input that I am having trouble with trying to remove the hover/active styling on.

In the image below, I am trying to remove the grey background/slight border that it is adding when it is clicked. I just want it to be white, nothing should change when it is click or hovered over.

enter image description here

Here is a fiddle: 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;
}

Upvotes: 0

Views: 2050

Answers (5)

Abhilash Pujari
Abhilash Pujari

Reputation: 34

Try by adding this css 

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

Upvotes: 0

vanburen
vanburen

Reputation: 21663

If you open DevTools and execute the dropdown button you'll see an event fire as far as .open being added to the input-group-btn class that you can the over ride as needed.

Working Example:

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

Upvotes: 1

Arun Ghosh
Arun Ghosh

Reputation: 7764

Try:

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

Upvotes: 1

Taj Khan
Taj Khan

Reputation: 589

here is the fiddle 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;
}

Upvotes: 0

Vishal Panara
Vishal Panara

Reputation: 766

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

Try above code

Upvotes: 0

Related Questions