Issue with datepicker focus and being active

[PG_10250187]

There is a border which is to be removed when focus or being active on the date picker. Tried with style properties on the mashup but if we remove the border there, then the calendar section date border is also hidden.

It will be good if we can write custom CSS or any alternate solution.

[abjain]

@PG_10250187 : Please try the attached entity. Have used the below custom CSS.

ptcs-datepicker::part(date-field)::part(text-box):hover{
border: none ;
}

[PG_10250187]

No it didn't work.

[abjain]

@PG_10250187 : Which thingworx version are you using? Did the entity provided did not worked after import? For me its working correctly. i.e when I hover over date picker , the border is becoming invisible.

[PG_10250187]

I'm using 9.3 thingworx version. I added the CSS in Custom CSS in respective mashup, but it didn't work. When I hover the border is not coming. Once I click on the datepicker, it shows one blue border (i.e from focus), then it shows one grey border (i.e being active).

[abjain]

@PG_10250187 : Please use this CSS instead for 9.3 twx.

ptcs-datepicker::part(date-field-text-box):hover{
border: none ;
}

[PG_10250187]

Hi Abjain,

Thank you for the reply!

It worked but I'm facing another issue when I'm leaving the focus. And also the blue border comes when focus, I need that also to be removed.

I have attached the video for reference.

[PG_10250187 · Accepted solution]

I fixed the issue. Below is the code:

ptcs-datepicker::part(date-field-text-box):hover, ptcs-datepicker::part(date-field-text-box){
border: none !important;
outline:none;
}

also updated the focus in style properties (border).