How to hide ios input field blinking cursor. am trying so many ways it's not working for me.

In Windows,

SCSS

.input--textfield {
    border: none;
    color: transparent;
    display: inline-block;
    font-size: 2em;
    text-shadow: 0 0 0 gray;
    
    &:focus {
        outline: none;
    }
}

HTML

<input type="text" name="" value="10" class="input--textfield">

Working for me,

IOS

Not working below code, do you have any suggestion.

How to hide ios input field blinking cursor. am trying so many ways it's not working for me.

In Windows,

SCSS

.input--textfield {
    border: none;
    color: transparent;
    display: inline-block;
    font-size: 2em;
    text-shadow: 0 0 0 gray;
    
    &:focus {
        outline: none;
    }
}

HTML

<input type="text" name="" value="10" class="input--textfield">

Working for me,

IOS

Not working below code, do you have any suggestion.

• javascript
• jquery
• html
• css
• safari

2 Answers 2

Try below it's very simple and working for me in IOS (5s, 6), IOS desktop and windows.

.input--textfield { caret-color: transparent;
}

<input type="text" name="" value="10" class="input--textfield">

ios android

.input--textfield {
  border: none;
  color: transparent;
  caret-color: transparent;
  text-indent: -999em;
}
<input type="text" name="" value="10" class="input--textfield">