Deactivate double border active input

  • Resolved bensita

    (@bensita)


    2 years, 5 months ago

    Hi, thanks for this amazing plugin.
    I′m customizing the way it looks on my website and I can′t find out how to deactivate the border animation when input selected.
    I just want to disable that, can you help me please?

    Thanks in advance,

    Hernan B

Viewing 4 replies - 1 through 4 (of 4 total)

  • hi,
    I just did that myself ??
    add extra css code to your website.

    div.woocommerce form .form-row input[type=text]:focus {
    outline: none;
}
    Thread Starter bensita

    (@bensita)

    Thanks 0sukaru! It′s working ??

    Thread Starter bensita

    (@bensita)

    An updated, since there are other input types

    /*DISABLE OUTLINES */
div.woocommerce form .form-row input[type=text]:focus,
div.woocommerce form .form-row input[type=email]:focus,
div.woocommerce form .form-row select .select2-container--focus:focus,
div.woocommerce form .form-row  input[type=tel]:focus,
div.woocommerce form .form-row  input[type=checkbox]:focus{
    outline: none;
}
    Plugin Author Diego Versiani

    (@diegoversiani)

    Hi @bensita & @0sukaru,

    The border/outline that is displayed when the field gets the focus are needed to pass accessibility test.

    People with low sight or cognitive disabilities might rely on the existence of the outline to identify which field is currently being typed in.

    For those reasons, I do not recommend removing them but rather change the color to adapt to the theme you are using on your website.

    In case you really want to remove them, you can use the CSS code below with a more complete list of places where Fluid Checkout adds them:

    body.woocommerce-checkout div.woocommerce input[type="number"]:focus,
body.woocommerce-checkout div.woocommerce input[type="checkbox"]:focus,
body.woocommerce-checkout div.woocommerce input[type="radio"]:focus,

body.woocommerce-checkout div.woocommerce form .form-row textarea,
body.woocommerce-checkout div.woocommerce form .form-row select,
body.woocommerce-checkout div.woocommerce form .form-row input[type="email"],
body.woocommerce-checkout div.woocommerce form .form-row input[type="number"],
body.woocommerce-checkout div.woocommerce form .form-row input[type="date"],
body.woocommerce-checkout div.woocommerce form .form-row input[type="search"],
body.woocommerce-checkout div.woocommerce form .form-row input[type="text"],
body.woocommerce-checkout div.woocommerce form .form-row input[type="tel"],
body.woocommerce-checkout div.woocommerce form .form-row input[type="url"],
body.woocommerce-checkout div.woocommerce form .form-row input[type="password"],
body.woocommerce-checkout div.woocommerce form .form-row input[type="checkbox"],
body.woocommerce-checkout div.woocommerce form .form-row input[type="radio"],
body.woocommerce-checkout div.woocommerce form .form-row .select2-selection,

body.woocommerce-checkout div.woocommerce ul#shipping_method .shipping-method__option input[type="radio"]:focus + .shipping-method__option-label:before,

body.woocommerce-checkout .fc-wrapper #payment .payment_methods > .wc_payment_method > input[type="radio"]:focus + label:before {
	outline: none;
}

    You can also replace outline: none; with outline-color: blue; to change the color of the outline as explained earlier would be a better alternative if you want to maintain this accessibility feature.

    Best,
    Diego

    • This reply was modified 2 years, 5 months ago by Diego Versiani. Reason: Remove link to code snippets as it does not apply to CSS code
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Deactivate double border active input’ is closed to new replies.