Form autocomplete breaks CSS hover

Question

Okay I have a dropdown form for a desktop website. The user hovers their cursor on a link, the form appears beneath, and they can fill it in.

It is done by means of CSS

.subscribe-popup .subscribe-form {
  opacity: 0;
  visibility: hidden;
}

.subscribe-popup:hover .subscribe-form,
.subscribe-popup:active .subscribe-form {
  visibility: visible;
  opacity: .95;
}

Here is the (edited for brevity) markup

<div class="subscribe-popup desktop-only">
    <span class="subscribe-cta">join our mailing list</span>
    <div class="subscribe-form">
        <div id="mc_embed_signup">
            <form  id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address:  <span class="asterisk">*</span></label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                    </div>

                    <!-- etc. -->

                    <div class="clear"><input type="submit" class="button" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"></div>
                </div>
            </form>
        </div>
    </div>
</div>

The problem is that Chrome produces a drop down with autocomplete suggestions when I click on any text input in the form. As soon as I hover my mouse over any of the suggestions, the hover is lost on the form, and the form disappears.

Why is that, and how do I stop this from happening?

exside · Accepted Answer · 2019-07-13T17:47:10.663

Would need more information about your markup, but if you want to keep the autocomplete, maybe you can solve it by simply adding a :hover to the form itself, the autocomplete-suggestions are some kind of shadow-DOM of the input, e.g. it would be contained within the form/input itself, so something like this might help:

.subscribe-popup .subscribe-form {
  opacity: 0;
  visibility: hidden;
}

.subscribe-popup:hover .subscribe-form,
.subscribe-popup:active .subscribe-form,
.subscribe-form:hover { /* this is new */
  visibility: visible;
  opacity: .95;
}

EDIT: After markup was provided I could fiddle around a bit and it seems the only way of preventing the flickering is to replace the :hover on the form with :focus-within, that seems to work BUT, no IE (neither the beloved old one nor Edge) do support it, so if you need support for these you likely need JS and then you could handle the entire interaction with JS anyways! OR you could try something like this polyfill for :focus-within (or maybe you don't want IE-users as subscribers anyways? =D)

.subscribe-popup .subscribe-form {
  opacity: 0;
  visibility: hidden;
}

.subscribe-popup:hover .subscribe-form,
.subscribe-popup:active .subscribe-form,
.subscribe-form:focus-within {
  visibility: visible;
  opacity: .95;
}

<div class="subscribe-popup desktop-only">
    <span class="subscribe-cta">join our mailing list</span>
    <div class="subscribe-form">
        <div id="mc_embed_signup">
            <form  id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address:  <span class="asterisk">*</span></label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                    </div>

                    <!-- etc. -->

                    <div class="clear"><input type="submit" class="button" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"></div>
                </div>
            </form>
        </div>
    </div>
</div>

a possible CSS-only alternative could be to make users of browser with no support for :focus-within click the subscribe link instead of just hovering it (which is probably what they will do anyways if nothing happens, just an assumption of course). Requires support for the general sibling combinator-selector which is widely supported (IE7+, everybody else):

.form-toggle {
    /* just make it invisible but not inaccessible */
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    height: 1px;
    outline: none;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.subscribe-popup .subscribe-form {
    opacity: 0;
    visibility: hidden;
}

.subscribe-popup:hover .subscribe-form,
.subscribe-popup:active .subscribe-form,
.form-toggle:checked ~ .subscribe-form,
.subscribe-form:focus-within {
    visibility: visible;
    opacity: .95;
}

<div class="subscribe-popup desktop-only">
    <input class="form-toggle" type="checkbox" id="form-toggle" />
    <label class="subscribe-cta" for="form-toggle">join our mailing list</label>
    <div class="subscribe-form">
        <div id="mc_embed_signup">
            <form  id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">
                <div id="mc_embed_signup_scroll">
                    <div class="mc-field-group">
                                <label for="mce-EMAIL">Email Address:  <span class="asterisk">*</span></label>
                                <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
                    </div>

                    <!-- etc. -->

                    <div class="clear"><input type="submit" class="button" value="Subscribe" name="subscribe" id="mc-embedded-subscribe"></div>
                </div>
            </form>
        </div>
    </div>
</div>

Thanks, I will give it a try. I will update my question to include some markup. — Rolf, Jul 13 '19 at 15:53
Well I moved show/hide functionality to the form element itself, including your suggestion, and strangely, now, as soon as I hover on the suggestions - instead of the form vanishing, the suggestions do, and the form flickers. So it is more functional but still somewhat broken. Odd. It makes sense considering what you wrote - the hover event for the autocomplete suggestions propagates up to the form but no further. — Rolf, Jul 13 '19 at 16:59
I think what is happening is that when I hover over the suggestion, the hover ends on the parent (.subscribe-popup) and begins on the form. The form flickers and the suggestions dropdown gets lost in transition. — Rolf, Jul 13 '19 at 17:07
@Rolf see updated answer above, added a snippet where it works with `:focus-within` — exside, Jul 13 '19 at 17:14
Thanks. I can get away with no IE but no Edge, not so sure - isn't Edge the up-to-date modern work of art from Microsoft? I can't thank you enough by the way. — Rolf, Jul 13 '19 at 17:27
Re Edge, yap, it is their version of modern-art =D...up-to-date, not so much^^... but yeah, then I'd probably recommend you a polyfill that you could remove once support is available... — exside, Jul 13 '19 at 17:30
@Rolf added a third example that is CSS only and works in all browsers that support the "sibling" selector, which is most... — exside, Jul 13 '19 at 17:40
I think I'll go with a javascript solution inspired by your hidden checkbox solution. I just toggle a class onclick - so that I can keep autocomplete which can be useful. My other idea was to rewrite the hover functionality by using the javascript bounding box for the popup and watching mousemove on the document to detect whether the cursor is within this box. However I can do simpler. — Rolf, Jul 14 '19 at 20:51

Showrin Barua · Answer 2 · 2019-07-13T16:13:55.743

0

<form>
  <input type="text" autocomplete="off">
  <input type="submit" value="submit">
</form>

You can stop browser autocomplete by doing the following.

<input type="text" autocomplete="off">

put the autocomplete="off" attribute in the input field. Hope it will solve your problem.

edited Jul 13 '19 at 16:13

answered Jul 13 '19 at 15:05

Showrin Barua

1,437
4
19

Thank you. I tried that, it did not seem to work (autocomplete still shows up for some reason), besides I would prefer to find a solution that keeps autcomplete which is a useful feature, however if I fail to find a better solution I would consider this. – Rolf Jul 13 '19 at 15:52
@Rolf check again whether all spellings and syntax are right or not. I've added an example in my answer. You can try that. – Showrin Barua Jul 13 '19 at 16:15
I tried again and again. I am guessing it is a problem with Chrome: https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off – Rolf Jul 13 '19 at 17:26
Lots of thanks for your time and effort helping me, by the way! – Rolf Jul 13 '19 at 17:28
1

May be. But I solved this problem in the same way I told here. :( – Showrin Barua Jul 13 '19 at 17:38
As per the URL in my previous comment - changing `autocomplete="off"` to `autocomplete="somerandomstring"` makes it work. However I think I will try to keep autocomplete because some users might want to use it. If that does not work then I will fall back to this. – Rolf Jul 14 '19 at 20:56

Form autocomplete breaks CSS hover

2 Answers2