a

Câu hỏi Thay đổi màu giữ chỗ của đầu vào HTML5 bằng CSS


Chrome hỗ trợ thuộc tính giữ chỗ trên input[type=text] các yếu tố (những người khác có thể làm quá).

Nhưng sau đây CSS không làm bất cứ điều gì với giá trị của trình giữ chỗ:

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}
<input type="text" placeholder="Value">

Value vẫn sẽ vẫn grey thay vì red.

Có cách nào để thay đổi màu của văn bản trình giữ chỗ không?


3600
2018-04-09 20:36


gốc


Quick heads-up (không phải giải pháp, chỉ là một FYI): nếu tôi nhớ chính xác, đầu vào [placeholder] chỉ khớp các thẻ <input> có thuộc tính giữ chỗ, nó không khớp với thuộc tính placeholder. - pinkgothic
Yah, suy nghĩ vượt qua tâm trí của tôi rằng điều này có thể giống như cố gắng tạo kiểu cho thuộc tính "tiêu đề" của một nguyên tố. Vì vậy, 1 cho suy nghĩ như nhau! - David Murdoch
@MathiasBynens Lớp giả: trình giữ chỗ được hiển thị khớp với phần tử đầu vào hiển thị văn bản trình giữ chỗ như vậy. Vì vậy, nó phù hợp <input> thẻ, như input công cụ chọn, nhưng hiển thị văn bản trình giữ chỗ ngay bây giờ. Nó cũng không khớp với thuộc tính của trình giữ chỗ. - HEX
@ HEX Nó không giống như input chọn bởi vì chọn tất cả input các yếu tố. :placeholder-shown chỉ chọn input các phần tử hiện đang hiển thị trình giữ chỗ, cho phép bạn chỉ tạo kiểu cho các phần tử đó và tạo kiểu văn bản giữ chỗ hiệu quả. Bạn đang cố nói điều gì vậy? - Mathias Bynens
@ HEX (Tất nhiên, nó cũng được chọn textarea các phần tử đang hiển thị văn bản trình giữ chỗ). - Mathias Bynens


Các câu trả lời:


Thực hiện

Có ba cách triển khai khác nhau: các phần tử giả, các lớp giả và không có gì.

  • WebKit, Blink (Safari, Google Chrome, Opera 15+) và Microsoft Edge đang sử dụng phần tử giả: ::-webkit-input-placeholder. [Tham khảo]
  • Mozilla Firefox 4 đến 18 đang sử dụng một lớp giả: :-moz-placeholder (một ruột kết). [Tham khảo]
  • Mozilla Firefox 19+ đang sử dụng phần tử giả: ::-moz-placeholder, nhưng bộ chọn cũ vẫn sẽ hoạt động trong một thời gian. [Tham khảo]
  • Internet Explorer 10 và 11 đang sử dụng một lớp giả: :-ms-input-placeholder. [Tham khảo]
  • Tháng 4 năm 2017: Hầu hết các trình duyệt hiện đại đều hỗ trợ phần tử giả đơn giản ::placeholder  [Tham khảo]

Internet Explorer 9 trở xuống không hỗ trợ placeholder thuộc tính, Opera 12 trở xuống không hỗ trợ bất kỳ bộ chọn CSS nào cho trình giữ chỗ.

Các cuộc thảo luận về việc thực hiện tốt nhất vẫn đang diễn ra. Lưu ý các phần tử giả hoạt động như các phần tử thực trong Shadow DOM. A padding trên một input sẽ không nhận được cùng màu nền như phần tử giả.

Bộ chọn CSS

Tác nhân người dùng được yêu cầu bỏ qua quy tắc có bộ chọn không xác định. Xem Bộ chọn cấp 3:

một nhóm các bộ chọn chứa bộ chọn không hợp lệ không hợp lệ.

Vì vậy, chúng tôi cần quy tắc riêng cho từng trình duyệt. Nếu không, toàn bộ nhóm sẽ bị bỏ qua bởi tất cả các trình duyệt.

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #909;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #909;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #909;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #909;
}
<input placeholder="Stack Snippets are awesome!">

Ghi chú sử dụng

  • Hãy cẩn thận để tránh sự tương phản xấu. Trình giữ chỗ của Firefox dường như được mặc định với độ mờ giảm, vì vậy cần phải sử dụng opacity: 1 đây.
  • Lưu ý rằng văn bản trình giữ chỗ chỉ bị cắt nếu nó không vừa - kích thước các yếu tố đầu vào của bạn trong em và kiểm tra chúng với cài đặt kích thước phông chữ tối thiểu lớn. Đừng quên dịch: một số ngôn ngữ cần thêm phòng cho cùng một từ.
  • Trình duyệt có hỗ trợ HTML cho placeholder nhưng không hỗ trợ CSS cho điều đó (như Opera) cũng nên được kiểm tra.
  • Một số trình duyệt sử dụng CSS mặc định bổ sung cho một số input các loại (email, search). Những điều này có thể ảnh hưởng đến hiển thị theo cách bất ngờ. Sử dụng tính chất  -webkit-appearance và -moz-appearance để thay đổi đó. Thí dụ:
    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

4531
2018-06-06 08:47



Cũng lưu ý rằng mặc dù Webkit xem xét điều này để có độ đặc hiệu khá mạnh, Mozilla thì không. Bạn có thể phải bật một vài nhà nhập khẩu trong đó để có những thứ hiển thị. - dmnc
@ toscho: cảm ơn vì câu trả lời tuyệt vời. Tôi chỉ cần một chút minh chứng về nó "sống", vì vậy ví dụ của bạn cũng có thể đạt được ở đây: jsfiddle.net/Sk8erPeter/KyVXK. Cảm ơn một lần nữa. - Sk8erPeter
Trình giữ chỗ của Firefox dường như được mặc định với độ mờ giảm. Đối với bất cứ ai khác làm mới khó khăn và tự hỏi tại sao heck này không xuất hiện để được làm việc ("tại sao văn bản màu trắng của tôi vẫn còn màu xám .."), sử dụng độ mờ đục: 1 - jwinn
Trong IE10 *:-ms-input-placeholder và :-ms-input-placeholder tự nó không hoạt động, nhưng INPUT:-ms-input-placeholder làm. Odd. - Jared
Lưu ý cho Bootstrap 3: "form-control" lớp ghi đè màu do đặc trưng CSS (tức là "form-control :: - webkit-input-placeholder"), vì vậy bạn cần phải ít nhất là cụ thể hoặc sử dụng "! Quan trọng" trong CSS của bạn. (Đây là địa ngục để gỡ lỗi vì cả Firebug lẫn Devtools đều không hiển thị lớp giả này) - Costa


/* do not group these rules */
*::-webkit-input-placeholder {
    color: red;
}
*:-moz-placeholder {
    /* FF 4-18 */
    color: red;
    opacity: 1;
}
*::-moz-placeholder {
    /* FF 19+ */
    color: red;
    opacity: 1;
}
*:-ms-input-placeholder {
    /* IE 10+ */
    color: red;
}
*::-ms-input-placeholder {
    /* Microsoft Edge */
    color: red;
}
*::placeholder {
    /* modern browser */
    color: red;
}
<input placeholder="hello"/> <br />
<textarea placeholder="hello"></textarea>

Điều này sẽ tạo kiểu cho tất cả input và textarea trình giữ chỗ.

Lưu ý quan trọng: Không nhóm các quy tắc này. Thay vào đó, hãy tạo một quy tắc riêng cho mỗi bộ chọn (một bộ chọn không hợp lệ trong một nhóm làm cho toàn bộ nhóm không hợp lệ).


656
2018-02-09 16:44



MSDN doc bạn liên kết đến, nói rằng nó chỉ được hỗ trợ trong Internet Explorer 10. Vẫn là một tìm kiếm tốt, nhưng không hữu ích lắm cho đến khi cơ sở người dùng IE10 trở nên quan trọng (chúng ta có thể xem xét một khung thời gian của năm). - danishgoel
Thực tế, bạn sẽ muốn giữ chỗ kiểu dáng trên trang web thống nhất, không phải kiểu dáng mỗi đầu vào riêng lẻ theo ID. - BadHorsie
Sau FF19 bạn phải sử dụng :: - moz-placeholder - viplezer
Bạn cần phải đặt CSS này ở cuối bảng định kiểu của bạn, nếu bạn cũng áp dụng một lớp trên đầu vào, để làm cho nó hoạt động trên IE (11). Xem ngã ba này trên JSFiddle jsfiddle.net/9kkef. Mở trang cả trong IE và trình duyệt khác, trong IE bạn sẽ thấy rằng văn bản giữ chỗ sẽ có màu của lớp được áp dụng. - Timo002


Bạn cũng có thể muốn tạo kiểu văn bản:

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #636363;
}
input:-moz-placeholder, textarea:-moz-placeholder {
  color: #636363;
}

260
2017-09-14 12:52



in trên chrome không hoạt động ... bất kỳ sự trợ giúp nào @media print {input [type = text] .form-control :: - bộ giữ chỗ của webkit-input-place, input [type = textarea] .form-control :: - webkit -in-place-placeholder {color: #FFFFFF; }} - Mahdi Alkhatib


Dành cho Bootstrap và Ít hơn người dùng, có một trình kết hợp .placeholder:

// Placeholder text
// -------------------------
.placeholder(@color: @placeholderText) {
  &:-moz-placeholder {
    color: @color;
  }
  &:-ms-input-placeholder {
    color: @color;
  }
  &::-webkit-input-placeholder {
    color: @color;
  }
}

96
2018-02-14 21:11



Hoặc đơn giản hơn, chỉnh sửa biến @input-color-placeholder - thường được tìm thấy trong variables.less - William
@ William sẽ không dễ dàng hơn để xác định các bộ chọn chính nó và sử dụng mixin để tránh phải quay trở lại và thay đổi nó trong trường hợp bạn đang tìm kiếm để làm cho một giữ chỗ của đầu vào một màu sắc khác nhau? - Brandito
@Brandito - nghe có vẻ giống như một vỏ cạnh - nói chung màu giữ chỗ là như nhau cho tất cả các yếu tố hình thức trong một thiết kế. - William
@ William Xin lỗi, tôi rất tệ khi sử dụng công cụ sorta này, tôi nghĩ sẽ tốt hơn nếu sử dụng mixin với đối số màu đầu vào mà bạn mong muốn mặc dù khá trung thực, tôi có lẽ đang nghĩ đến các trường hợp cạnh tôi ' m được sử dụng để (tạo kiểu cho trình giữ chỗ đầu vào tìm kiếm ở vị trí trên nền màu: P) xin lỗi nhưng bạn đúng, xin lỗi. - Brandito
@Brandito Đó là tất cả tốt. Luôn luôn có trường hợp cạnh. - William


Ngoài câu trả lời của toscho tôi đã nhận thấy một số mâu thuẫn webkit giữa Chrome 9-10 và Safari 5 với các thuộc tính CSS được hỗ trợ đáng chú ý.

Cụ thể, Chrome 9 và 10 không hỗ trợ background-color, border, text-decoration và text-transform khi tạo kiểu cho trình giữ chỗ.

So sánh toàn bộ trình duyệt chéo là đây.


92
2018-04-14 02:28





Dành cho Sass người dùng:

// Create placeholder mixin
@mixin placeholder($color, $size:"") {
  &::-webkit-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &::-moz-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
  &:-ms-input-placeholder {
    color: $color;
    @if $size != "" {
      font-size: $size;
    }
  }
}

// Use placeholder mixin (the size parameter is optional)
[placeholder] {
  @include placeholder(red, 10px);
}

68
2018-06-25 09:01



Cách linh hoạt hơn - để sử dụng @content; - milkovsky


Điều này sẽ làm việc tốt. DEMO TẠI ĐÂY:

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #666;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #666;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
  color: #666;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #666;
}
<input type="text" placeholder="Value" />


51
2017-10-08 19:21



Tôi cũng phải thêm quan trọng vào Firefox v56 - Savage


Trong Firefox và Internet Explorer, màu văn bản nhập bình thường sẽ ghi đè thuộc tính màu của phần giữ chỗ. Vì vậy, chúng ta cần

::-webkit-input-placeholder { 
    color: red; text-overflow: ellipsis; 
}
:-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}
::-moz-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
} /* For the future */
:-ms-input-placeholder { 
    color: #acacac !important; text-overflow: ellipsis; 
}

43





Giải pháp trình duyệt chéo:

/* all elements */
::-webkit-input-placeholder { color:#f00; }
::-moz-placeholder { color:#f00; } /* firefox 19+ */
:-ms-input-placeholder { color:#f00; } /* ie */
input:-moz-placeholder { color:#f00; }

/* individual elements: webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

/* individual elements: mozilla */
#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }

Tín dụng: David Walsh


37





Bây giờ chúng ta có một cách tiêu chuẩn để áp dụng CSS cho trình giữ chỗ của đầu vào: ::placeholder -phần tử giả từ điều này Bản mô-đun CSS cấp 4.


35



Điều này làm việc trong Firefox 51. Tôi sẽ sử dụng phương thức này; các trình duyệt khác sẽ sớm bắt kịp với tôi (với điều kiện không có chức năng nào bị hỏng nếu không áp dụng kiểu tiêu chuẩn). - Lonnie Best