Change the bottom border color of buttons

  • 1
  • Question
  • Updated 4 years ago
I have been trying to change the bottom border color of buttons with no success. It is the green (#0097a7) color that shows on the bottom of some active and inactive buttons. I have inspected the element in chrome and changed the class in my css but that pesky green stays. I would love to banish that green from every where! I have tried all different types of combinations but nothing changes the color once it is my css style sheet. Thank you!

This is the green I am trying to get rid of this. 


Here is the css for the default button:
.ui-widget-content .ui-button.ui-state-default {    border-bottom-color: #f2f2;
}

Here is the css for the active button:
.ui-button .ui-state-hover .ui-state-active { color: #0087B8;
}
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Tami,

Try adding this to your css...

.ui-button {
 border: 0;
}
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
Hi Matt,

Thanks for your reply. I added the above css but the green bottom border remains. Can you think of anything else I may be missing?
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
give this a go:

.ui-button {   
    border-bottom-width: 5px;
    border-bottom-color: red;
}

obviously you can play around with the color and width (or remove it completely e.g. 0px for width) once you know you've got the right css.

Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
Hi Greg,

Thanks for chiming in!

That works for a button not within a tab.

I have a custom button on a page title on a tab it didn't change the color and it didn't change on hover. Have you been able to get that work?

Thank you!
Photo of Greg Jarrett

Greg Jarrett

  • 3,496 Points 3k badge 2x thumb
you should be able to apply a 'unique id' to the page title component in its advanced properties:



and then put that same unique id with a # in front of the css like this:

#titleButtons .ui-button {       
    border-bottom-width: 5px;
    border-bottom-color: red;
}

give that a go!
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
Hi Greg,

No such luck. The green stays on hover and the button in a tab. It is so crazy because I can inspect the element and change the color that way. But when I bring the code into css it does nothing.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
The css selectors are slightly different for buttons when they are included in tabs and when they are not. 

css selectors when button is included in tab. 

.ui-button,
.ui-widget-content .ui-button.ui-state-default,
.ui-widget-content .ui-button.ui-state-default.ui-state-hover,
.ui-widget-content .ui-button.ui-state-default.ui-state-active
    {border: 0;}

css selector when button is above the tab. 

.ui-button,
.ui-button.ui-state-default,
.ui-button.ui-state-default.ui-state-hover,
.ui-button.ui-state-default.ui-state-active
    {border: 0;}

You should be able to use one or both of those selector syntaxes and get what you are after. 
Photo of Tami Lust

Tami Lust

  • 5,280 Points 5k badge 2x thumb
Fantastic! Thank you as always Rob. I have been trying to figure this our for a couple of months now.

Thank you!