Nhiều phong cách cho văn bản giữ chỗ đầu vào

Question

Tôi muốn phong cách văn bản của tôi hộp đầu vào giữ chỗ, mà tôi đang làm như thế này:

::-webkit-input-placeholder { font-size: 16pt; color: #555; } 
::-moz-placeholder { font-size: 16pt; color: #555; } 
:-ms-input-placeholder { font-size: 16pt; color: #555; } 
input:-moz-placeholder { font-size: 16pt; color: #555; } 

Nhưng tôi có kịch bản mà placeholders khác nhau đòi hỏi phong cách khác nhau như thế này:

Điều này có thể thực hiện được không? Tôi dường như không thể kết hợp thành công css ở trên với các lớp hoặc và loại bộ chọn phần tử khác. Tất cả các hướng dẫn tôi đã tìm thấy dừng lại tại chỉ cần thiết lập văn bản giữ chỗ một lần và không nhận được vào có nhiều stylholder giữ chỗ. Đó có phải là một bối cảnh toàn cầu?

Answer 1

Bạn cần phải kết hợp các lớp học với các yếu tố giả, và sau đó bạn có thể áp dụng một lớp học để các yếu tố đầu vào:

input::-webkit-input-placeholder { font-size: 16pt; color: #555; } 
 
input::-moz-placeholder { font-size: 16pt; color: #555; } 
 
input:-ms-input-placeholder { font-size: 16pt; color: #555; } 
 
input:-moz-placeholder { font-size: 16pt; color: #555; } 
 

 
input.other::-webkit-input-placeholder { font-size: 12pt; color: red; } 
 
input.other::-moz-placeholder { font-size: 12pt; color: red; } 
 
input.other:-ms-input-placeholder { font-size: 12pt; color: red; } 
 
input.other:-moz-placeholder { font-size: 12pt; color: red; }

<input type="text" placeholder="Hello"></input> 
 
<input type="text" class="other" placeholder="Hello"></input>

Lưu ý: Tôi đã thêm input vào đây để làm rõ và chính xác.

Fiddle

Hãy nhớ rằng, các selectors giả không phải là yếu tố thực trên trang web, nhưng gắn liền với một số yếu tố khác. Kết hợp chúng với một số phần tử chọn khác để phù hợp với một cái gì đó cụ thể hơn.

Answer 2

Sử dụng các lớp trên đầu vào của bạn sẽ hoạt động. Các bạn đã thử dưới đây:

/* WebKit browsers */ 
 
input.myClassNameOne::-webkit-input-placeholder { 
 
    font-size: 16pt; color: #555; 
 
} 
 

 
/* Mozilla Firefox 4 to 18 */ 
 
input.myClassNameOne:-moz-placeholder { 
 
    font-size: 16pt; color: #555; 
 
} 
 

 
/* Mozilla Firefox 19+ */ 
 
input.myClassNameOne::-moz-placeholder { 
 
    font-size: 16pt; color: #555; 
 
} 
 

 
/* Internet Explorer 10+ */ 
 
input.myClassNameOne:-ms-input-placeholder { 
 
    font-size: 16pt; color: #555; 
 
}

<input type="text" class="myClassNameOne" placeholder="test input" /> 
 
<input type="text" class="myClassNameTwo" placeholder="test input" />

JSFiddle: http://jsfiddle.net/markwylde/fFLL7/1/

Answer 3

Mặc dù các câu trả lời khác là chính xác, tôi muốn lưu ý rằng bạn không cần phải áp dụng lớp học trực tiếp cho đầu vào. Bạn cũng có thể áp dụng nó cho một số wrapper cha mẹ, và hơi sửa đổi CSS được đề xuất để đạt được kết quả tương tự, có lẽ dễ dàng hơn khi bạn có thể cần phải làm ít sửa đổi trên HTML của bạn.

Một ví dụ (xem thêm fiddle):

.default ::-webkit-input-placeholder { font-size: 16pt; color: #555; } 
 
.default ::-moz-placeholder { font-size: 16pt; color: #555; } 
 
.default :-ms-input-placeholder { font-size: 16pt; color: #555; } 
 
.default input:-moz-placeholder { font-size: 16pt; color: #555; } 
 

 
.other ::-webkit-input-placeholder { font-size: 12pt; color: red; } 
 
.other ::-moz-placeholder { font-size: 12pt; color: red; } 
 
.other :-ms-input-placeholder { font-size: 12pt; color: red; } 
 
.other input:-moz-placeholder { font-size: 12pt; color: red; }

<div class='default'> 
 
    <input placeholder='default'/> 
 
    <input placeholder='default'/> 
 
    <input placeholder='default'/> 
 
</div> 
 
    
 
<div class='other'> 
 
    <input placeholder='other'/> 
 
    <input placeholder='other'/> 
 
    <input placeholder='other'/> 
 
</div>