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-25-2021

Thank you so much, it works i just made box-shadow : none

.form-control:focus,
.sp-page-root .form-control:focus {
border-color: #00B9B0;
outline: none;
-webkit-box-shadow: none; ---------> made none
box-shadow: none;
}
.select2-container.select2-container-active {
outline: 5px auto #00B9B0;
border-color: #00B9B0;
box-shadow: none;
outline-offset: -2px;
}

Thanks a lot!!

Bhavana20 · ‎06-01-2021

hello,

when viewing the fields from the IE, it shows like this

samething when viewed from the Chrome

Please help me why this is happening like this.

Thank you!!

Oleg · ‎06-01-2021

Hi!

I can't reproduce the problem: my test will be displayed in IE in the same way like in Chrome.

What I can recommend you to try is modifying of CSS rules to increase specificity (see here). For example, you can try to use

div.select2-container.select2-container-active {
    outline: 5px auto #00B9B0;
    border-color: #00B9B0;
    box-shadow: 0 0 5px #00B9B0;
    outline-offset: -2px;
}
div.select2-container-active .select2-choice {
    border-color: #00B9B0;
}
ul.select2-results .select2-highlighted {
    background: #00B9B0;
    color: #fff;
}

instead of previously posted

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

I hope it helps. If it will not help you should use Developer Tools of IE to examine which CSS rules overwrites the CSS rules, which set your colors.