[Resolved] asterisk on required fields possible? no colored border on focus/hover…

[Author]

Posts

[evaM]

Dear Support,
I have two questions that are not real issues, but a styling problem

1) The "normal standard " for a focused field in a form seems to be a coloured border...
i want to "switch that off", where can i find the code?

2) I want to use Asterisk stars for required fields. What do I have to do, to make this happen.::

I have minimum Ideas of coding.....so I ask for a neby freindly sollution if possible.
Thank you

the form is now on a trial page
hidden link

hopefully, Eva

[Minesh]

Hello. Thank you for contacting the Toolset support.

1) The "normal standard " for a focused field in a form seems to be a coloured border...
i want to "switch that off", where can i find the code?
==>
Ok, I see that the following CSS apsplied on field focus:

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

You should try to use the following CSS and add the following CSS to your form's CSS box:

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #000000;
    outline: 0;
    
}

2) I want to use Asterisk stars for required fields. What do I have to do, to make this happen.::
==>
To add the Asterisk stars you simply need to edit your form field and add * just before you field label.

Please check the following screenshot:
- hidden link

[evaM]

Dear Minesh,
thank you for advise

as there were 2 borders on focus, one is now gone
but the other is still there ...
I have intsalled the Inspector for webdesign, but i am unable to filter where this second focus is palced

concerning the asterisk...
i am looking for a solution for asterisks, that change the color, when a needed input is missing

sorry for coming back again
greetings from Austria
Eva

[Minesh]

as there were 2 borders on focus, one is now gone
but the other is still there ...
I have intsalled the Inspector for webdesign, but i am unable to filter where this second focus is palced
===>
It still looks like the border coming from the box-shadow attribute of CSS. Can you please try to use the following CSS code:

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #000000;
    outline: 0;
    box-shadow:black !important;
}

concerning the asterisk...
i am looking for a solution for asterisks, that change the color, when a needed input is missing
===>
There is no such feature available as javascript validations will be fired automatically as its inbuild with the forms when you click on the submit button, it will display the error message above the field.

However, if you want to display asterisk in a different color then you should add the following code instead of asterisk just before your field name:

<span class="red-color">*</span>

and add the following code to your form's CSS box:

.red-color{ color:red; }

[evaM]

Sorry to say, but the border in light baby blue is still there on focus....

there must be another code targeting this border-behaviour.... ?

thank you for the asterisk-code, i 'll chek that out

[Minesh]

That is strange. Can you please send me admin access details so I can troubleshoot this issue further.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

I've changed the CSS as given under and I see it works:

.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #000000;
    outline: 0;
    box-shadow: 0 0 0 0.05rem #000;
}

Regarding your other question about emails, as per our support policy, we entertain only one question per ticket. This will help other users searching on the forum as well as help us to write correct problem resolution summery. Please kindly open a new ticket with your every new question you may have

[evaM]

My issue is resolved now. Thank you!
Also for yout patience and not giving up.

Kind regards, Eva

[evaM]

I am sorry, the blue border is back.... 🙁

waht can I do?