Màu đầu vào Safari safari màu

Question

Tôi gặp sự cố CSS nhỏ với thiết bị Safari trên iPhone. đầu vào tìm kiếm của tôi là màu xanh và khi người dùng tập trung vào nó, caret là gần như vô hình:

Trong tất cả các trình duyệt máy tính để bàn, nó có đúng màu (màu trắng), ngay cả trên máy tính để bàn Safari. Bất kỳ ý tưởng làm thế nào để sửa lỗi này và thay đổi màu sắc caret trên thiết bị iOS?

phong cách Input:

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ó một W3C specification cho điều này được gọi là caret-color mà có thể được sử dụng như thế này:

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>

Đó là currently supported bởi Chrome (cũng trên Android), Firefox và Opera. Có thể tin tốt: Có vẻ như Safari cũng hỗ trợ phiên bản xem trước công nghệ, vì vậy có thể iOS Safari sẽ theo sau.