CSS hover style remains after button click in iOS devices

user_2396525 0
Viewed 4469

I am facing issues with CSS hover style sticking after tapping a form button in iOS. Form has some input fields and the submit button has classes defined on focus & hover state. The issue is when form has any invalid selection and submit button is clicked. In mobile devices somehow submit button's focus gets locked and style defined in focus & hover states gets applied. This can be checked using chrome responsive mode and selecting iphone6 as device.

In desktop this issue does not occur; style of button before & after clicking is same, but in mobile devices it's different.

.btnsubmit {
    background-color: #000000;
    border: 1px solid #000000;
    color: #ffffff;
}
.btnsubmit:focus,
.btnsubmit:hover {
    background-color: #ffffff; 
    color: #000000;
}

Code Pen : https://codepen.io/bhupendra1011/full/pdZmYV/

hover button forms css ios
2 Answers

As I just landed on the same problem and solved it differently, I'll document what worked for me.

It is now, as of Media Queries Level 4, possible to detect if the device supports hovering with the CSS Media query hover.

Therefore I just applied my style on such devices and my problem was solved.

a {
  @media (hover: hover) {
    &:hover {
      color: red;
    }
  }
}
user_54041860

Someone else figured this out. You will need to use modernizr.js to achieve it. Just use the CSS format below, and copy the javascript from this Codepen onto your site, and hover should behave properly in iOS:

https://codepen.io/vidhill/pen/bVxVrE

.no-touchevents .btnsubmit:hover {
    background-color: #ffffff; 
    color: #000000;
}
user_13572900
Related