How do I keep cursor visible in form field on tap on mobile

96 0 4

Using Debut. Currently, my form input field is borderless. When customers tap it to fill out, I want the cursor to appear and stay. The cursor is missing until I begin typing into the field. Here's a little of my form code from my theme.scss.liquid


select {
  border: none;
  background-color: $color-text-field;
  color: $color-text-field-text;
  max-width: 100%;
  line-height: 1.2;
  border-radius: $border-radius;
Shopify Partner
2294 117 357

the cursor is missing until I begin typing into the field

*Edit: to clarify "cursor" for browsers is the mouse pointer, "caret" is the cursor inside form controls like the blinking bar for inputs or text areas.

Without seeing the problem its' going to be hard for others to understand the problem.

You may want to rephrase what the actual goal is to try something else if your referring to the mouse cursor.


Unless you've changed something the cursor should appear once the input has focus as that's the point and how form controls should behave or your breaking accessibility. 

Debut Demo Form -

Try installing a fresh version and checking that to tell if somethings gone wrong with current theme.

It's possible the browser's(user-agent's) caret color has been set to be transparent:

in which case caret-color: auto; should correct that

Note: 💣 be super careful when messing with carets, cursors, forms and controls it's a direct path towards bad accessibility and annoyed visitors.


Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ or donate to
Confused? Busy? Buy a custom solution
1 Like