Button selected style

[krishnakomal123]

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.

[slangley]

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

[krishnakomal123]

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

[krishnakomal123]

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

[raluca_edu · Accepted solution]

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

[slangley]

Hi @krishnakomal123.

We did some testing on ThingWorx 8.5.4 and there is an option on the Style Properties tab for Pressed and Selected that allows you to choose an underline for text-decoration.  However, the Selected option doesn't appear to work, so we will be opening an internal case for this.

The option for Pressed works, but as soon as you release the mouse, the line disappears, as it is designed to do.  The Hover option also appears to work, so that might be a solution depending on your needs.

Regards.

--Sharon

[slangley]

Hi @krishnakomal123.

The internal case has been accepted as a bug and is being targeted for fix in ThingWorx 9.0.  This version is targeted for June release.

Regards.

--Sharon

[slangley]

Hi @krishnakomal123.

ThingWorx 9.0 was released last week and is available for download here.  The release contains the fix for the issue you reported.

Regards.

--Sharon

[krishnakomal123]

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;
}