2013-08-24 124 views
8

Tôi đã thay đổi màu phông chữ giữ chỗ của trường nhập thành màu xanh lam, tôi đã thử nghiệm nó trong Chrome, màu của nó là màu xanh lam. Nhưng trong FF 23.0.1, màu hơi "nhẹ" hơn màu xanh.Màu phông chữ của sự khác biệt giữ chỗ giữa Firefox 23.0.1 Chrome 23.0.1271.64 và IE 8

Xem độ tương phản dưới đây, lưu ý "Tháng" nằm trong một khoảng và màu sắc cũng là màu xanh:

Trong Chrome, không sao đâu, xem dưới đây:

enter image description here

Tuy nhiên, trong firefox 23.0.1, nhìn như thế này:

enter image description here

Trong IE8, không hiển thị:

enter image description here

Lưu ý sự khác biệt về màu sắc.

Dưới đây là đoạn code css Tôi đang sử dụng:

.month_span { color: blue; } 
.input::-webkit-input-placeholder { color:blue} 
.input::-moz-placeholder { color:blue; } /* FF 19+ */ 
.input:-moz-placeholder { color:#bbb; } /* FF 18- */ 
.input:-ms-input-placeholder { color:#bbb; } 

Câu hỏi của tôi: 1. Tại sao màu sắc nhẹ hơn trong FF? 2. Làm thế nào để hiển thị giá trị giữ chỗ trong IE?

+1

Styling đầu vào luôn luôn là một kinh nghiệm bực bội. Đặc biệt nếu bạn đang cố gắng làm cho chúng trông giống nhau trên các trình duyệt. Đó là một nỗ lực dũng cảm, nhưng thực sự, tôi sẽ không lãng phí quá nhiều thời gian vào nó. –

+0

Ồ, tôi thấy bạn nói IE8. Theo [MDN] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input), trình giữ chỗ chỉ được hỗ trợ bởi IE10 trở lên. –

+0

Bất kỳ lý do nào cho sự khác biệt về màu sắc mà bạn nghĩ? – JavaScripter

Trả lời

20

Thuộc tính placeholder không được IE hỗ trợ cho đến IE 10, để giải thích điều đó.

Firefox dường như áp dụng opacity:0.54 đến các văn bản giữ chỗ: http://css-tricks.com/snippets/css/style-placeholder-text/

này sẽ sửa chữa:

.input::-moz-placeholder { color:blue; opacity: 1; } /* FF 19+ */ 
.input:-moz-placeholder { color:#bbb; opacity: 1; } /* FF 18- */ 
+0

Cảm ơn bạn! Điều này rất hữu ích! Giải quyết! – JavaScripter

+0

Cảm ơn bạn rất nhiều !!! – EliSherer

+0

lưu ý: hiện tại độ mờ mặc định cho trình giữ chỗ trong FF là 0,4 - https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-placeholder – nevermind