Skip to main content
pshashipreetham
18-Opal
pshashipreetham18-Opal
18-Opal
February 8, 2023
Solved

Blue border on the TextFields

  • February 8, 2023
  • 2 replies
  • 2295 views

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,

 

    Best answer by pshashipreetham

    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,

    2 replies

    J
    jensc17-Peridot
    17-Peridot
    February 8, 2023

    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

    pshashipreetham
    18-Opal
    pshashipreetham18-OpalAuthor
    18-Opal
    February 8, 2023

    Hi @jensc ,

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

     

    Thanks,

    J
    jensc17-Peridot
    17-Peridot
    February 8, 2023

    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

     

      pshashipreetham
      18-Opal
      pshashipreetham18-OpalAuthorAnswer
      18-Opal
      February 8, 2023

      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,

      Terms & ConditionsAccessibility statement