2

I have an input with a border that changes colour on focus. This works well on android and web browsers, issues appear on ios. The border disappears altogether when tapping inside the input and writing. Any ideas?

.my-input {
  background: #fff;
  border: 2px solid red;
  border-radius: 20px;
  font-size: 14px;
}

.my-input:focus {
  border: 2px solid purple;
  outline: none;
}

.my-input:disabled {
  box-shadow: 0 0 10px 0 blue;
}
<input class="my-input" type="text">
Mr Mime
  • 113
  • 4
  • 9
  • 1
    Possible duplicate of [CSS :focus Not Working in iOS](https://stackoverflow.com/questions/30584335/css-focus-not-working-in-ios) – Suresh Karia Nov 20 '18 at 13:39
  • 1
    Try setting `-webkit-appearance:none` and `outline: none` to the `input`. iOS sets some custom styles for inputs which may conflict with your changes. See also https://stackoverflow.com/questions/7599533/ios-forces-rounded-corners-and-glare-on-inputs – elveti Nov 20 '18 at 13:39
  • 1
    @elveti you're right, that combined with `outline-width:0` did the trick – Mr Mime Nov 20 '18 at 15:11

0 Answers0