Search code examples
csswoocommerceabbr

Remove ellipsis from required fields

I am having trouble removing the ellipsis (3 dots) from my required input fields using CSS:

If you go to the website and add something to the cart then go to the checkout page you will be able to inspect the current CSS we have, which is based on woocommerce default styling. https://www.bobfraley.org/product/salt-and-light-study-edition/

I have tried removing the border from the <abbr> which should fix the issue but it's not working.

abbr, abbr[title] {
    border: none !important;
    border-bottom: none !important;
}
Solution

  • Its not the border. The ellipsis are there because of the browsers default styling text-decoration: underline dotted.

    Use this style to remove it

    abbr, abbr[title] {
    text-decoration: none;
}