Service Portal fields color change

Bhavana20 · ‎05-21-2021

Hello Guys,

Can anyone help me to solve this please

In Portal when we are clicking on fields, it shows the "Blue" border and how to change it to other color we want.

I am not getting how to fix that. Please help me this is bit urjent.

Thanks and Regards,

Bhavana

Oleg · ‎05-25-2021

I changed Theme to "Stock" and added the following CSS rules directly in CSS variables:

.form-control:focus,
.sp-page-root .form-control:focus {
    border-color: #00B9B0;
    outline: none;
    -webkit-box-shadow: 0 0 5px #00b9b0;
    box-shadow: 0 0 5px #00b9b0;
}
.select2-container.select2-container-active {
    outline: 5px auto #00B9B0;
    border-color: #00B9B0;
    box-shadow: 0 0 5px #00B9B0;
    outline-offset: -2px;
}
.select2-container-active .select2-choice {
    border-color: #00B9B0;
}
.select2-results .select2-highlighted {
    background: #00B9B0;
    color: #fff;
}

As the result the colors have been changed like expected:

I think that one should add more CSS rules to change colors for all different controls, but the above example shows that the approach works. Isn't so?

View solution in original post

Bhavana20 · ‎05-21-2021

Hello @Harshvardhan , @Oleg ,

Can you Please help me, i am not getting which attribute to modify.

Thanks and Regards,

Bhavana

Justin77 · ‎05-21-2021

What you're looking for is the CSS selector :focus

https://www.w3schools.com/cssref/sel_focus.asp

so I would add input:focus and textarea:focus selectors to your portal theme and set whatever properties you are looking for (you may need the !important tag). The blue you see is set as the outline property:

https://developer.mozilla.org/en-US/docs/Web/CSS/outline

Bhavana20 · ‎05-21-2021

Thank you for your response, Our client do nott want that but just when we click on field it highlights in the blue color and i want to change it to Green color.

I am not getting how to do that.

Please help!!

Justin77 · ‎05-21-2021

See https://docs.servicenow.com/bundle/quebec-servicenow-platform/page/build/service-portal/concept/port... I recommend using this in the Theme CSS.

Create two CSS selectors, input:focus and textbox:focus

Then set the property "outline" for whatever color you're looking for. Here's another example: https://www.w3schools.com/cssref/pr_outline.asp