Làm thế nào để thiết lập đầu vào màu văn bản, nhưng không giữ chỗ màu, trong IE11

Question

Làm thế nào tôi có thể thay đổi phông màu của một inputvăn bản hộp mà không ảnh hưởng đến màu sắc placeholder phông chữ trong trình duyệt Internet Explorer 11?

Nếu tôi thay đổi màu sắc của phông chữ trong một đầu vào (Fiddle):

HTML:

<div class="buttonToolbar"> 
    <input type="text" placeholder="e.g. Stackoverflow"><br> 
</div> 

CSS:

.buttonToolbar input { 
    color: Blue; 
} 
:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    font-style: italic; 
    color: GrayText; 
} 
::-webkit-input-placeholder { /* WebKit browsers */ 
    font-style: italic; 
    color: GrayText; 
} 

Các văn bản giữ chỗ là không có còn màu xám-ish mặc định trong Internet Explorer 11:

Nhưng nó không hiển thị như tôi muốn trong Chrome 35:

Bonus nhí

Nếu tôi không tạo kiểu cho input hộp, sau đó hộp đầu vào là không theo kiểu. Thay đổi:

.buttonToolbar input { 
    color: Blue; 
} 

để

.buttonToolbar { 
    color: Blue; 
} 

có nghĩa là văn bản giữ chỗ tại làm những gì nó là vụ phải tới:

nhưng bây giờ màu sắc văn bản không làm những gì nó phải làm:

Điều tôi cần là tìm hiểu cách thay đổi màu giữ chỗ HTML5 của đầu vào bằng CSS.

Bonus Reading

• Change an HTML5 input's placeholder color with CSS

Answer 1

Bộ chọn giữ chỗ của bạn cần cụ thể hơn như dưới đây.

.buttonToolbar input { 
    color: Blue; 
} 
.buttonToolbar input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    font-style: italic; 
    color: GrayText; 
} 
.buttonToolbar input::-webkit-input-placeholder { /* WebKit browsers */ 
    font-style: italic; 
    color: GrayText; 
} 

http://jsfiddle.net/55Sfz/2/

Answer 2

tôi là loại mới này, và câu trả lời này chỉ có thể là một sửa chữa nhanh chóng ... nhưng nếu bạn thêm! Quan trọng sau khi GrayText sau đó nó dường như hoạt động (ít nhất trong IE 10).

color: GrayText !important; 

Đây là fiddle http://jsfiddle.net/uc2Rj/

Nếu bạn không muốn sử dụng! Quan trọng này có thể ít nhất bạn bắt đầu đi đúng hướng giải quyết vấn đề của bạn. Nó có thể là một cái gì đó liên quan đến các yếu tố giả và ưu tiên của các lớp học trên chúng. (Why can't I override existing pseudo-elements?)