Skip to main content
K
krishnakomal12315-Moonstone
15-Moonstone
April 20, 2020
Solved

Button selected style

  • April 20, 2020
  • 2 replies
  • 4370 views

On click of a button I am getting border on all sides of a button.I want to get only border in the bottom.I tried using css but it doesn't work.

 

My css code :

#root_button-7 .button-element:active
{
border-style : solid;
border-width : 2px;
border-bottom-color : #77c5f9;
border-top : none;
border-right : none;
border-left : none;
}

 

Please find the attached file.

Best answer by raluca_edu

Hi,

 

Try to use !important, usually this works to overwrite the existing css:

 

#root_button-7 .button-element:active
{
border-style : solid !important;
border-width : 2px !important;
border-bottom-color : #77c5f9 !important;
border-top : none !important;
border-right : none !important;
border-left : none !important;
}

 

Hope it helps,

Raluca Edu

2 replies

S
slangleyCommunity Manager
Community Manager
April 20, 2020

Hi @krishnakomal123.

 

I assume the screenshot you provided depicts the results you're currently seeing.  Can you provide a mock up of what you expect to see?  Are you trying to show that the button has been clicked?

 

Regards.

 

--Sharon

K
krishnakomal12315-MoonstoneAuthor
15-Moonstone
April 21, 2020

It is done in photoshop.I need to do it in thingworx using css which I am unable to get.

K
krishnakomal12315-MoonstoneAuthor
15-Moonstone
April 21, 2020

On button click ,only the bottom border of button should have line as shown in the image.

K
krishnakomal12315-MoonstoneAuthor
15-Moonstone
April 30, 2020

 

 

I want style to exist after button click also.i.e focus style as attached pic.But it's not impacting.I have tried below code.It doesn't work.

 

#root_button-7 .button-element:active .button-element:focus
{
border-style : solid !important;
border-width : 2px !important;
border-bottom-color : #77c5f9 !important;
border-top : none !important;
border-right : none !important;
border-left : none !important;
}

Terms & ConditionsCookie settingsAccessibility statement