Vertical line appearing in input type=number on Mac version of Safari

Question

I've come across a bug in the Mac version of Safari where on a number input field I have a vertical line appearing in the box. I've checked it on an iphone as well as Windows based browsers and it isn't present on anything else. Edit: Turnip has pointed out that it happens in Chrome on Windows as well. I've checked it this morning and it happens when you click inside the input box.

The code I'm using to generate the html is:

<div class="quantity">
  <input class="minus" type="button" value="-">
  <input type="number" step="1" min="1" max="" name="quantity" value="1" title="Qty" class="input-text qty text no-spinners" size="4" pattern="[0-9]*" inputmode="numeric">
  <input class="plus" type="button" value="+">
</div>

The link to an example of the page in question is link

Edit: updated the code block to reflect what's rendered client side rather than the server side code.

You should remove your server-side code from examples that are client-side questions. — Diodeus - James MacFarlane, May 17 '19 at 15:13
@Turnip Thanks. I'd not noticed it in Chrome although it seems to be when the input field is in it's focus state. — Chris, May 20 '19 at 08:28
@MaazSyedAdeeb It's the vertical black line next to the number in the input box. It's not blinking for me on screen however. — Chris, May 20 '19 at 09:36

score 0 · Answer 1 · answered May 20 '19 at 11:34

0

It's the spinner on the input. You've styled it using the no-spinners class, by adding border and height to it. You can follow this to correctly hide it, if that was your intention in the first place.

answered May 20 '19 at 11:34

maazadeeb

5,922
2
27
40

Vertical line appearing in input type=number on Mac version of Safari

1 Answers1