2011-02-01 29 views
6

Đọc một bài viết về HTML5, nó xảy ra với tôi rằng trong khi trình giữ chỗ là vô cùng hữu ích trong khả năng sử dụng hình thức, nếu họ không thể được nhắm mục tiêu với CSS mà không javascript, họ thực sự là một bước em bé.Trình giữ chỗ văn bản biểu mẫu HTML5 - Họ có lớp CSS giả không?

Vì vậy, tôi có thể nhắm mục tiêu trình giữ chỗ trong CSS để trông khác với văn bản được nhập không?

+0

Có cách nào để có hành vi "giữ chỗ" hoàn toàn không có JavaScript không? – Pointy

+1

Bản sao của: http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css –

+0

@Pointy Vâng, như Fuzz nhẹ nói, đó là trong HTML5. [Điều này, ví dụ] (http://jsfiddle.net/jnzhe/), đã hoạt động trong Chrome. –

Trả lời

6

Webkit sử dụng :: - giả mạo webkit-đầu vào-chỗ dành sẵn. Moz sử dụng một: giả mạo giữ chỗ -moz-placeholder.

+0

Cảm ơn thông tin hữu ích. Có một biến thể cho IE9? –

+2

IE9 không hỗ trợ trình giữ chỗ. –

+0

Cảm ơn bạn đã làm rõ điều đó đối với tôi. –

2

enter image description here Tôi giả sử bạn đã có một cái gì đó như thế này trong HTML của bạn

<input type="text" name="name" /> 

Các css tương ứng sẽ là

input::-webkit-input-placeholder { /* Chrome/Opera/Safari */ 
    color: blue; 
} 
input::-moz-placeholder { /* Firefox 19+ */ 
    color: blue; 
} 
input:-ms-input-placeholder { /* IE 10+ */ 
    color: blue; 
} 
input:-moz-placeholder { /* Firefox 18- */ 
    color: blue; 
} 
input:placeholder { 
    color: blue; 
} 

Tôi cũng khuyến khích bạn tham gia một cái nhìn tại

input:placeholder-shown { 
    border: 5px solid red; 
} 

Đây là một tốt resource .

Các vấn đề liên quan