2016-05-30 20 views
5

Mam mały błąd CSS w Safari na urządzeniu iPhone. Mój wkład wyszukiwania jest niebieski i gdy użytkownik koncentruje się na tym, daszek jest prawie niewidoczne:Zabezpieczenie wejścia iOS Safari caret

Caret

We wszystkich przeglądarek desktopowych, ma odpowiedni kolor (biały), nawet na pulpicie Safari. Każdy pomysł, jak to naprawić i zmienić kolor kija na urządzeniu z systemem iOS?

style wejściowe:

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; 
    } 
} 
+0

Udało ci się to rozwiązać? Mam ten sam problem. –

+1

Niezupełnie wygląda na to, że nie jest to możliwe za pośrednictwem CSS na natywnym urządzeniu z systemem iOS. – Pawel

+0

Dzięki. Skończyło się na tym, że wprowadziłem własną opiekę. –

Odpowiedz

2

Jest W3C specification na ten nazywa caret-color które mogą być używane tak:

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>

To currently supported przez Chrome (także na Androidzie), Firefox i Opera. Może dobra wiadomość: Wygląda na to, że Safari obsługuje ją również w wersji do podglądu technologii, więc może iOS Safari pójdzie w jej ślady.