Change styles of Bootstrap Hover & Fieldset effect

I am using twitter bootstrap and my own CSS to achieve something.

What I want to do is, all the input fields like username, password & search, on selecting them, the border becomes blue, I want to change it to black.

Another thing is, I am using the navbar inverse. It has dropdowns. When I click the dropdown and hover over the list of elements, it is in blue color by default. I am trying to change that hover thing to black color too. How do I achieve this?

Now these are the things I’ve tried. I tried inspecting with the firebug element and it always shows something in the bootstrap.min file. However I can’t find anything related to hover there and I’m a bit weak when it comes to the transition things although I am not sure if it is related to transition. Another thing I did is, I I edited the value #08c to #000 from the variables.less file and compiled it and obtained a bootstrap file which contains the changed values but still the default color only shows.

Please help me achieve these effects.

Thank you!

This should be pretty easy, but it’s harder without a link, so if you can link to your site, that would be good. Changing the form border is to do with this:

input:focus {outline: [I]color here[/I];}

In Firebug and Chrome dev tools, you can click a button to show the :hover, :focus etc. styles, which is very handy.

It would be helpful if you could post a link to the page you are working on. If that is not possible, perhaps you can post the html and css in “code” boxes in a message. Since there are probably several css files, the link would be best.

Ninja’d by Ralph :slight_smile:

I just did what Ralph partially said. I just added these and achieved what I wanted to.


input[type=text], input[type=password] {
      font-size:14px;
      border:0.7px solid #ccc;
      background: white;
      padding: 4px 6px;
      line-height: 20px;
      height: 20px;
      width: 160px;
      border-radius: 4px;
      
}
input[type=text]:focus, input[type=password]:focus{
      border-color:black;
      -moz-box-shadow: 0px 0px 6px #dfdfdf;
      -webkit-box-shadow: 0px 0px 6px #dfdfdf;
      box-shadow: 0px 0px 6px #dfdfdf;
}

.dropdown-menu > li > a:hover {
      color:white;
      background:black;
}