Changing text field color when clicking

Hi Markus,
It is not possible to provide you CSS that affects that particular field only unless you can share your site URL. I guess you do not feel comfortable sharing your site URL here. If so, please contact us via https://zakratheme.com/ Chat Support with site URL and we’ll help you with this with CSS.

Hi Ashish,

Thanks a lot for your email.

Please have a look at my website

https://test.puapill.com/product/contrasting-design-t-shirt/

Please open this weblink with the firefox and internet explorer. When selecting the fields “Email” i dont want that it has a red border when selecting and clicking on it.

I only want to have that on the woocommerce product tabs.

Thanks a lot in advance.

Kind regards

Markus

Hi @wehodl,

Please try adding the below CSS to Additional CSS box and test:

.woocommerce #review_form #respond p input#email:focus {
    outline: none;
    border: 2px solid black;
    border-radius: 4px;
}

Help link: https://docs.themegrill.com/knowledgebase/where-do-i-add-my-custom-css/

Hi Ashesh,

The code works perfect! Can you share with me the same kind of code for the name field and the review field? I ask because on mobile these fields have a blue border when selecting. I want that these borders also disappear on mobile as it is the case with the code that you gave me for the email field.

Another question I have. Could you please have a look at this link (https://test.puapill.com/we-will-publish-new-content-soon/) and share with me the same custom css codes so everything is the same as mentioned above?

Thanks a lot Ashesh.

Kind regards

Markus

I forgot i also need this code for the register account field where you also have to type in your email address in woocommerce when making a new account as a customer.

Thanks a lot.

Kind regards

Markus

Moreover this also appears for the email field in the woocommerce checkout. I dont want if i click in the checkout form that the email field has a red border when clicking it.

Thanks a lot for providing me with the correct custom css codes.

Kind regards

Markus

Hi @wehodl,

Please remove the CSS that I have provided earlier and add this new CSS code to the additional box and test:

input[type="email"]:focus {
    outline: none;
}

The above CSS will remove the red outline on all email input fields.

Thanks,
Ashesh

Hi Ashesh,

Thanks a lot for your answer! The code works perfect however can we exclude the SUBSCRIBE ENTER YOUR EMAIL fields? The Newsletter (Enter your Email) Subscribe field should keep the red border when clicking on it.

Can you provide the right css code to me so it works the way as i mention it.

Thanks a lot in advance.

Kind regards

Markus

Hi @wehodl,

Please add the following CSS code to Additional Box and test:

input[type="email"]:focus {
    outline: none;
}

.mc4wp-form-fields > input[type="email"]:focus {
    outline: 1px solid red;
}

Thanks,
Ashesh

Hi Ashesh,

Thanks for that. Works perfect. You are the boss!

Kind regards

Markus

Glad I could help. ??