cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Learn all about PTC Community Badges. Engage with PTC and see how many you can earn! X

Blue border on the TextFields

pshashipreetham
17-Peridot

Blue border on the TextFields

Hi,

 

For the button, we do have the following CSS for the blue border issue

ptcs-focus-overlay {
visibility: hidden;
}
.ptcs-wrapper:not([no-wc-style]):focus:not(.dummy):not(.dummy):not(.dummy) {
box-shadow: none;
}

 Article: Article - CS328986 - Is it possible to remove the blue border around widgets when selecting them at runtime in ThingWorx (ptc.com)

Even after changing the Colors in the Style Properties in the TextField, the blue color still exists.

How can this be resolved for the TextField widget?

Thingworx version: TWX 9.3.0

Thanks,

 

Shashi Preetham,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.
1 ACCEPTED SOLUTION

Accepted Solutions

So,

I Just Modified the CSS from @jensc, CSS would be 

ptcs-textfield::part(text-box)
{
   --ptcs-focus-overlay--border-style:none;
}


Make sure Linting is turned off:

Shashi_Preetham_0-1675880253009.png


Thanks,

Shashi Preetham,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.

View solution in original post

4 REPLIES 4

Hello,

 

Couldn't this be done by using the style properties?

 

jensc_0-1675867845117.png

Try removing the border color here and see if that works.

 

Regards,

Jens

Hi @jensc ,

No, there are no blue Colors, I just checked everywhere in Style Properties Tab.

 

Thanks,

Shashi Preetham,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.

Hello @pshashipreetham 

 

I also tested this and also found that even though I had removed the border color for the text box both under "Focus", "Disabled & Focus" and "Pressed" it still had a blue border.

 

The text field:

jensc_3-1675872476136.png

I did find this in the developer tool:

jensc_0-1675872344393.png

And by changing it in the elements style: 

jensc_1-1675872370200.png

My text field no longer had the blue focus border:

jensc_2-1675872393960.png

However, unfortunately I have never fully grasped how to use the custom CSS on thingworx.

But perhaps someone else could help with that.

 

Regards,

Jens

 

So,

I Just Modified the CSS from @jensc, CSS would be 

ptcs-textfield::part(text-box)
{
   --ptcs-focus-overlay--border-style:none;
}


Make sure Linting is turned off:

Shashi_Preetham_0-1675880253009.png


Thanks,

Shashi Preetham,
Email: psp316r@outlook.com,
Mobile: +91 8099838001.
Top Tags