10

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/

Sparky
  • 98,165
  • 25
  • 199
  • 285
Bhupendra
  • 1,196
  • 16
  • 39
  • can u elaborate on focus gets locked? – Rajkumar Somasundaram Nov 27 '17 at 09:28
  • styles that are defined on focus and hover state of element gets applied.After validation , submit button gets different style applied as compare to its initial state in Mobile view – Bhupendra Nov 27 '17 at 09:35
  • 1
    Possible duplicate of [mobile safari links retains focus after touch](https://stackoverflow.com/questions/10642953/mobile-safari-links-retains-focus-after-touch) – Sparky Nov 27 '17 at 16:41
  • Show the demo code within the OP; please do not rely on a CodePen. This is purely a CSS issue, and has absolutely nothing to do with jQuery Validate since there is nothing within this plugin that controls the style of buttons. This is solely an issue with using `:hover` in iOS; there is no mouse pointer on an iPhone/iPad, so there is no such concept as "hovering". Edited tags. – Sparky Nov 28 '17 at 01:03

2 Answers2

6

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;
    }
  }
}
David Dal Busco
  • 7,975
  • 15
  • 55
  • 96
1

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;
}
Patrick Hennessey
  • 453
  • 2
  • 16