CODEWITHSUNDEEP
cssdrop-down-menu
SoftTimur
SoftTimur

Reputation: 5540

Set the colour of the dropdown button while hovering its listed items

I have made the following dropdown button (JSBin). Currently, when the dropdown list is open, and when I hover over the listed items, the button itself changes its colour to dark blue. I don't want this to happen; I want it to change its color to #1abc9c. Does anyone know how to do this?

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>    
    .rb .btn.btn-primary {
        background-color: #1abc9c;
        border-color: white
    }

    .rb .btn.btn-primary:hover {
        background-color: #2fe2bf;
    }

    .rb .btn.btn-primary:focus {
        outline: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .rb .btn.btn-primary:active {
        border-color: white;
        background-color: #1abc9c;
    }

    .rb .dropdown-toggle  {
        border-color: white !important;
    }
  </style>
</head>
<body>
  <div class="rb">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      </button>
        <ul class="dropdown-menu">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
    </div>
  </div>
</body>
</html>

Edit 1: I have a better version here. Now, while pressing the normal button above, we see the colour changes to a slightly darker blue, and when we release the pressing, the colour changes back to a brighter blue. I want to have the same effect on the dropdown button: ie, press the button ==> a slightly darker blue ==> release the button ==> a brighter blue and the dropdown list is shown ==> press the button ==> a slightly darker blue ==> release the button ==> a brighter blue and the dropdown list is hidden.

Does anyone know if it is possible?

Upvotes: 0

Views: 1541

Answers (3)

Rohan
Rohan

Reputation: 467

Please try this i hope it will helpful to you.

.rb .dropdown:active .btn-primary:active {
    background-color: #1abc9c !important;
}

Upvotes: 3

Richard Foucaud
Richard Foucaud

Reputation: 310

It's normal because you are using Bootstrap. When a button is focused, Bootstrap adds this rule : background-color: #204d74;

So you need to add a background-color:#1abc9c on your .btn-primary when it's :focus like this :

.rb .btn.btn-primary:focus {
    outline: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color:#1abc9c;
}

Upvotes: 0

Kwestion
Kwestion

Reputation: 464

Using chrome developer tools you can isolate the state of the DOM element you want to change, in this case it is 

.open>.dropdown-toggle.btn-primary:focus {
      background-color: #1abc9c;
}

Try it out in your css and you can see it work

Upvotes: 0

Related Questions