Home/ Questions/Q 8960633
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T15:42:11+00:00

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

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    First, I recommend not editing the bootstrap stylesheets unless you absolutely have to. A better practice is to override specific bootstrap classes in your own stylesheet (make sure your stylesheet is the last one loaded by the web page). Since you are using LESS, you could also import the bootstrap stylesheets into your own and load a single stylesheet using something like @import "path/to/bootstrap.min.css"

    For changing the color of the items in the dropdown menu, you would use an ‘element:hover’ as your css selector. In bootstrap, I believe it would look like this: 

    .dropdown-menu > li > a:hover {
   /* styles */
}

    Changing the color of the form “glow” is a bit more involved, since it isn’t actually a border. I recommend you check out the brief writeup about this effect here: http://www.scriptcult.com/subcategory_97/article_635-glow-on-focus-input-form-fields.html

    This jsfiddle demonstrates both overriding the default dropdown style, and the input glow discussed in the above article: http://jsfiddle.net/2UPan/3/

    I hope this helped!

    • 0