2

The cursor jumps a few characters to the right when clicking on a search box if it has left padding.

I have narrowed the problem down to padding-left and type="search". The problem goes away if I remove either left padding or change the input type to type"text" instead of type="search".

Here is a minimal reproducible example of the problem:

#myelementId.myelementClass {
  margin: 1px 29px 1px 1px;
  height: 38px;
  width: 500px;
  padding-left: 19px;
}
<form>
  <div>
    <input class="myelementClass" id="myelementId" type="search" />
  </div>
</form>

I am using Chrome Version 77.0.3865.120 (Official Build) (64-bit). When I type something in the search box, then click on any character, the cursor will appear a few characters to the right.

This issue does not occur on the following: (tested by Skylar)

  • Microsoft Edge 44.17763.771.0
  • IE 11.775.17763.0
  • FireFox 69.0.3

IMPORTANT: I can't change the type or padding as I need to do this in production where most of the code is not mine.

Skylar
  • 928
  • 5
  • 18
Narendra Rana
  • 391
  • 3
  • 9
  • 1
    I'm unable to reproduce this issue on Chrome. Is your client zoomed or something? – Libra Oct 11 '19 at 23:27
  • nope zoom is 100% are you using a different chrome version? – Narendra Rana Oct 11 '19 at 23:35
  • I can confirm the problem. (Chrome 77.0.3865.90) – Skylar Oct 12 '19 at 00:35
  • @Laif What version are you using? – Skylar Oct 12 '19 at 00:50
  • I think in your original css code you may write something like `.myelementClass[type=search] {padding-left: 19px;}` – Mhmd Az Oct 12 '19 at 08:08
  • Answer to your **IMPORTANT** part: You can overwrite the already written CSS by using `!important` in your CSS – Mhmd Az Oct 12 '19 at 08:26
  • I can also confirm on my Chrome (v. 77) ... this must be a bug when type is `search`. Changing to `type="text"` and it works. A workaround, drop padding/border on input and set it on the div wrapper. If you need to mimic outline etc. when input has focus, you need an extra element, positioned after the input, and use the sibling selector to target it. – Asons Oct 12 '19 at 08:48
  • 1
    And as/if you say _I can't change the type or padding_, then your are stuck with it, until Chrome fix it. – Asons Oct 12 '19 at 08:58
  • I logged this as an issue in chromium bug tracker https://bugs.chromium.org/p/chromium/issues/detail?id=1014243 – Narendra Rana Oct 15 '19 at 05:04
  • Chromium team fixed this issue v 78 onwards! Thanks – Narendra Rana Oct 26 '19 at 01:13

0 Answers0