Issue with border around input tags (turning off in CSS has unwanted side effect

[rrdein]

I had a problem where my “Add to Cart” buttons were showing with a border around them, so I turned it off in my CSS. However, the eStore product search box is now invisible because there is no border. Both are <input>

I saw a couple posts about this where the customer was told to turn the border off in CSS, but there is still an issue here.

[wzp]

Please post a link to the affected page(s).

[rrdein]

sorry, right here:

[http://tinyurl.com/mhxhswq]

The product search box is at the top of the “central” part of the page, but the border is invisible. This was a side-effect of turning off the border for <input> tags in CSS. I originally did that because my “Add to Cart” buttons all had borders (because they were also <input>s).

[wpCommerce]

Hi, Try using input.eStore_product_search_input_field instead of input. That way all input fields won’t get affected by your custom CSS.

You can use our WP Custom CSS plugin to do this: https://www.tipsandtricks-hq.com/wordpress-custom-css-plugin-6413

[rrdein]

Thank you for your reply.

I undid my original changes, and if you will look at my site again you will see the “Add to Cart” image and search box now both have the border again. I’m not skilled with HTML/CSS. Is there a specific piece of code I can change or add into my style.css file that will remove the border from the “Add Cart” buttons?

[rrdein]

Ok hehe, I figured it out, here is the code to add for anyone else who sees this:

input[class*=”eStore_button”]{

border: none;

}

Just had to try a little harder.

Thank you for the help.

[Author]

Posts