6

when I click on a Bootstrap button, a csss is applied while the mouse button is clicked. This is also visible when the mouse button is hold pressed over a bootstrap button.

I need to change that style, but I can't find it using inspect element. How can I find what style is applied and how can I change it?

Terix
  • 1,367
  • 5
  • 25
  • 39
  • possible duplicate of [How can I see the styles attached to :hover and other pseudo classes in firebug and the chrome debugger](http://stackoverflow.com/questions/6767278/how-can-i-see-the-styles-attached-to-hover-and-other-pseudo-classes-in-firebug) – Ravimallya Apr 10 '14 at 11:30
  • While that will potentially expose the issue, I feel like Johann Dyck's answer is a much more straightforward answer to the question in the context asked. – 1owk3y Oct 01 '17 at 13:55

2 Answers2

7

I had this problem the other week. If you're using chrome, open inspect element, code highlight the button, right click, select Force Element State, select :focus. This will show you the CSS code that you need to alter.

OliverB
  • 190
  • 3
  • 10
3

Having an issue with this myself until I applied the style to .btn-default:active:focus

Johann Dyck
  • 613
  • 1
  • 6
  • 13
  • Was actually about to flame this answer... however this astonishingly works! Somehow the combination of both `:active:hover` works in the Bootstrap 3 context. They don't seem to work individually. Thanks Johann! – 1owk3y Oct 01 '17 at 13:50
  • Glad you found it useful! Honestly, I don't even remember what project I used that on. – Johann Dyck Oct 03 '17 at 01:26