CSS - đặt màu nền của :: chọn trong một INPUT hoặc TEXTAREA trong webkit/chrome?

Question

Tôi đang cố gắng thiết lập màu lựa chọn trên trang web của chúng tôi [dành cho các trình duyệt hỗ trợ điều này; không được hỗ trợ sẽ nhận được hệ thống mặc định; chỉ tìm kiếm CSS & sẽ không triển khai JS cho việc này].

:: lựa chọn hoạt động tốt (bỏ qua -moz để rõ ràng ở đây) trên văn bản trang thông thường. Tuy nhiên, tôi muốn lựa chọn :: cũng hoạt động trên văn bản đã chọn trong các phần tử INPUT và TEXTAREA. Các công trình sau đây trong Firefox (http://cl.ly/image/201s09102K36) nhưng không làm việc trong webkit (Chrome hoặc Safari), nơi mà tôi nhận được ánh sáng màu xanh hệ thống mặc định (http://cl.ly/image/031C2R1Q2l2i):

::selection { background: #f7a494; } 
input::selection { background: #f7a494; } 

Bất kỳ sự giúp đỡ? Tôi đã xem xét các phần ghi đè trên trang web nhưng không thể tìm thấy thuộc tính có liên quan.

Answer 1

Tôi đã thử nghiệm tính năng này trên máy Mac của mình trong Chrome 51.0.2704.103 và Safari 9.1.1 (11601.6.17) và có vẻ như đây không còn là vấn đề nữa. Không có nhu cầu đầu vào :: lựa chọn như OP đã gợi ý, các mã cần thiết cho việc này là:

::selection{ 
    background: #f7a494; 
} 

::-moz-selection{ 
    background: #f7a494; 
} 

Nếu bạn vẫn gặp vấn đề này thử fiddle sau, nếu nó hoạt động có thể có cái gì khác trong mã của bạn đang can thiệp vào nó.

https://jsfiddle.net/nLftpwjc/

---

Proof

Answer 2

bcz, webkit theo rgba thay vì # 123456

hãy thử những điều sau đây:

đầu vào :: lựa chọn {background: rgba (231,105,105,0.7)}

Answer 3

Tôi vừa được tìm kiếm xung quanh cho điều này và đã nhận thấy bạn chỉ có thể sử dụng một bộ chọn :focus để xác định CSS trường đầu vào tập trung. Như thế này:

input:focus { background: #f7a494; } 

Hy vọng điều này sẽ hữu ích.