::selection for IOS

Question

On a new website we want that when the user clicks on the input field, the text gets selected. I'm using ::selection for this, see: https://css-tricks.com/almanac/selectors/s/selection/ This works fine for all browsers and android, but not for IOS.

The code looks like this:

#div-01::selection { 
    background-color: transparent; 
    color: rgb(251,251,251); 
    text-shadow: none; 
}

Is there a way to get this working for IOS? If you have any other option to get this working let me know.

Thanks.

Answer 1

Safari for iOS is currently not supporting ::selection in any way. So no, you can't use it on iOS.

Answer 2

I also wanted to hide the selection highlight in a text input, and using background-color: transparent; in a ::selection for a text input failed only iOS browsers. My use case involved programmatically controlling what was selected. By combining the programmatic selection and turning off user selection, I got the desired effect of hiding the selection highlight in a text input.

My use case of programmatically controlling selection involved the input element's setSelectionRange (docs) and listening for whenever the caret position changed.