Colore di inserimento di input per Safari iOS

Question

Ho un piccolo problema CSS con Safari su dispositivo iPhone. La mia ricerca ingresso è blu e quando l'utente si concentra su di esso, accento circonflesso è quasi invisibile:

In tutti i browser desktop, ha colore giusto (bianco), anche sul desktop di Safari. Qualche idea su come risolvere questo problema e cambiare il colore del cursore sul dispositivo iOS?

stili di ingresso:

input { 
    background-color: $stateBlue; 
    height: $navbarItemHeight; 
    padding: 0 10px; 
    vertical-align: bottom; 
    color: $white; 
    border-radius: $borderRadius; 
    font-size: 1.1666666667em; // 16px 
    -moz-appearance:none; 
    -webkit-appearance:none; 

    &::-webkit-input-placeholder { 
    text-shadow: none; 
    -webkit-text-fill-color: initial; 
    } 
} 

Answer 1

C'è un W3C specification per questo chiamato caret-color che può essere utilizzato in questo modo:

input[type="text"].custom { 
 
    caret-color: red; 
 
}

<div> 
 
    <label>default caret:</label> 
 
    <input type="text"/> 
 
</div> 
 
<div> 
 
    <label>custom red caret:</label> 
 
    <input type="text" class="custom"/> 
 
</div>

E 'currently supported da Chrome (anche su Android), Firefox e Opera. Forse buone notizie: sembra che Safari lo supporti anche con la sua versione di anteprima tecnologica, quindi forse seguirà iOS Safari.