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ũng có thể làm như vậy).

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

input[placeholder], [placeholder], *[placeholder] {
    color: red !important;
}

<input type="text" placeholder="Value">

Valuesẽ vẫn còn greythay vì red.

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

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 lớp giả: :-moz-placeholder( một dấu hai chấm). ^{[ Tham khảo ]}
• Mozilla Firefox 19+ đang sử dụng phần tử giả: ::-moz-placeholdernhư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 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 ^{[ Ref ]}

Internet Explorer 9 trở xuống hoàn toàn không hỗ trợ placeholderthuộc tính, trong khi 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 paddingtrên inputsẽ không có màu nền giống như phần tử giả.

Bộ chọn CSS

Tác nhân người dùng được yêu cầu bỏ qua một quy tắc với 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ệ là không hợp lệ.

Vì vậy, chúng tôi cần các 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, do đó cần sử dụng opacity: 1ở đây.
• Lưu ý rằng văn bản giữ chỗ sẽ bị cắt nếu nó không phù hợp - kích thước các yếu tố đầu vào của bạn emvà kiểm tra chúng với các cài đặt kích thước phông chữ tối thiểu lớn. Đừng quên bản dịch: một số ngôn ngữ cần nhiều chỗ hơn cho cùng một từ.
• Các trình duyệt có hỗ trợ HTML cho placeholdernhưng không có 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ố inputloại ( email, search). Chúng có thể ảnh hưởng đến kết xuất theo những cách không mong muốn. Sử dụng các thuộc tính -webkit-appearance và -moz-appearanceđể thay đổi điều đó. Thí dụ:

    [type="search"] {
        -moz-appearance:    textfield;
        -webkit-appearance: textfield;
        appearance: textfield;
    }

/* 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ẽ phong cách tất cả inputvà textareagiữ 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ệ).

Bạn cũng có thể muốn tạo kiểu cho textareas:

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

Đối với người dùng Bootstrap và Ít người dùng, có một mixin .placeholder:

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

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

Cụ Chrome 9 và 10 không hỗ trợ background-color, border, text-decorationvà text-transformkhi tạo kiểu tóc giữ chỗ.

So sánh đầy đủ trình duyệt là ở đây .

Đối với người dùng Sass :

// 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);
}

Đ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" />

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

::-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; 
}

Giải pháp đa trình duyệt:

/* 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

Sử dụng mới ::placeholdernếu bạn sử dụng autoprefixer .

Lưu ý rằng mixin .placeholder từ Bootstrap không được dùng cho mục đích này.

Thí dụ:

input::placeholder { color: black; }

Khi sử dụng autoprefixer, phần trên sẽ được chuyển đổi thành mã chính xác cho tất cả các trình duyệt.

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

Tôi mới nhận ra một điều gì đó cho Mozilla Firefox 19+ rằng trình duyệt mang lại giá trị độ mờ cho trình giữ chỗ, vì vậy màu sắc sẽ không phải là thứ bạn thực sự muốn.

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #eee; opacity:1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: #eee; opacity:1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #eee; opacity:1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #eee; opacity:1;
}

Tôi ghi đè lên opacitycho 1, vì vậy nó sẽ tốt để đi.

Tôi không nhớ nơi tôi đã tìm thấy đoạn mã này trên Internet (nó không được viết bởi tôi, không nhớ nơi tôi đã tìm thấy nó, cũng không phải ai đã viết nó).

$('[placeholder]').focus(function() {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function() {
        var input = $(this);
        if (input.val() == '' || input.val() == input.attr('placeholder')) {
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    $('[placeholder]').parents('form').submit(function() {
        $(this).find('[placeholder]').each(function() {
            var input = $(this);
            if (input.val() == input.attr('placeholder')) {
                input.val('');
            }
        })
    });

Chỉ cần tải mã JavaScript này và sau đó chỉnh sửa trình giữ chỗ của bạn bằng CSS bằng cách gọi quy tắc này:

form .placeholder {
   color: #222;
   font-size: 25px;
   /* etc. */
}

Tôi nghĩ mã này sẽ hoạt động vì chỉ cần một trình giữ chỗ cho văn bản loại đầu vào. Vì vậy, CSS một dòng này sẽ đủ cho nhu cầu của bạn:

input[type="text"]::-webkit-input-placeholder {
    color: red;
}

Đối với người dùng Bootstrap , nếu bạn đang sử dụng class="form-control", có thể có vấn đề về tính đặc hiệu của CSS. Bạn sẽ được ưu tiên cao hơn:

.form-control::-webkit-input-placeholder {
    color: red;
}
//.. and other browsers

Hoặc nếu bạn đang sử dụng Ít :

.form-control{
    .placeholder(red);
}

Nếu bạn đang sử dụng Bootstrap và không thể làm việc này thì có lẽ bạn đã bỏ lỡ thực tế là chính Bootstrap đã thêm các bộ chọn này. Đây là Bootstrap v3.3 mà chúng ta đang nói đến.

Nếu bạn đang cố gắng thay đổi trình giữ chỗ bên trong lớp CSS .form-control thì bạn nên ghi đè lên như thế này:

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

Mã ngắn và sạch này:

::-webkit-input-placeholder {color: red;}
:-moz-placeholder           {color: red; /* For Firefox 18- */}
::-moz-placeholder          {color: red; /* For Firefox 19+ */}
:-ms-input-placeholder      {color: red;}

Còn cái này thì sao

<input type="text" value="placeholder text" onfocus="this.style.color='#000'; 
    this.value='';" style="color: #f00;" />

Không có CSS ​​hoặc giữ chỗ, nhưng bạn có cùng chức năng.

Tôi đã thử mọi sự kết hợp ở đây để thay đổi màu sắc, trên nền tảng di động của mình và cuối cùng là:

-webkit-text-fill-color: red;

mà đã lừa

Đối với người dùng SASS / SCSS sử dụng Bourbon , nó có chức năng tích hợp.

//main.scss
@import 'bourbon';

input {
  width: 300px;

  @include placeholder {
    color: red;
  }
}

Đầu ra CSS, bạn cũng có thể lấy phần này và dán vào mã của mình.

//main.css

input {
  width: 300px;
}

input::-webkit-input-placeholder {
  color: red;
}
input:-moz-placeholder {
  color: red;
}
input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}

thử mã này cho các yếu tố đầu vào khác nhau phong cách khác nhau

your css selector::-webkit-input-placeholder { /*for webkit */
    color:#909090;
    opacity:1;
}
 your css selector:-moz-placeholder { /*for mozilla */
    color:#909090;
    opacity:1;
}
 your css selector:-ms-input-placeholder { /*for for internet exprolar */ 
   color:#909090;
   opacity:1;
}

ví dụ 1:

input[type="text"]::-webkit-input-placeholder { /*for webkit */
    color: red;
    opacity:1;
}
 input[type="text"]:-moz-placeholder { /*for mozilla */
    color: red;
    opacity:1;
}
 input[type="text"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: red;
   opacity:1;
}

ví dụ 2:

input[type="email"]::-webkit-input-placeholder { /*for webkit */
    color: gray;
    opacity:1;
}
 input[type="email"]:-moz-placeholder { /*for mozilla */
    color: gray;
    opacity:1;
}
 input[type="email"]:-ms-input-placeholder { /*for for internet exprolar */ 
   color: gray;
   }

Đây là một ví dụ nữa:

.form-control::-webkit-input-placeholder {
  color: red;
  width: 250px;
}
h1 {
  color: red;
}

<div class="col-sm-4">
  <input class="form-control" placeholder="Enter text here.." ng-model="Email" required/>
</div>

Thêm một khả năng thực tế rất đẹp và đơn giản: bộ lọc css !

Nó sẽ phong cách mọi thứ, bao gồm cả giữ chỗ.

Sau đây sẽ đặt cả hai đầu vào trên cùng một bảng màu, sử dụng bộ lọc màu để thay đổi màu. Hiện tại nó hiển thị rất tốt trong các trình duyệt (ngoại trừ ...)

input {
  filter: sepia(100%) saturate(400%) grayscale(0) contrast(200%) hue-rotate(68deg) invert(18%);
}

<input placeholder="Hello world!" />
<input type="date" /><br>
<input type="range" />
<input type="color" />

Để cho phép người dùng thay đổi linh hoạt, sử dụng màu loại đầu vào để thay đổi hoặc để tìm sắc thái, hãy xem đoạn trích này:

Từ: https://codepen.io/Nico_KraZhtest/pen/bWExEB

function stylElem() {
  stylo.dataset.hue = ((parseInt(stylo.value.substring(1), 16))/46666).toFixed(0)
  Array.from(document.querySelectorAll('input, audio, video')).forEach(function(e){
      e.style.cssText += ";filter:sepia(100%) saturate(400%)grayscale(0)contrast(200%)hue-rotate("+ stylo.dataset.hue+"deg)invert("+(stylo.dataset.hue/3.6)+"%)"
  out.innerText = e.style.cssText
})()}

stylElem()

<div id="out"></div> <p>
  <input placeholder="Hello world!" />
  <input type="date" /><br>
  <input type="range" />
  <input type="color" />
Colors (change me)-> 
<input type="color" id="stylo" oninput="stylElem()" /> <br><br>
<audio controls src="#"></audio> <br><br> 
<video controls src="#"></video>

Css lọc tài liệu: https://developer.mozilla.org/en-US/docs/Web/CSS/filter

OK, trình giữ chỗ hoạt động khác nhau trong các trình duyệt khác nhau, vì vậy bạn cần sử dụng tiền tố trình duyệt trong CSS của mình để làm cho chúng giống hệt nhau, ví dụ Firefox cung cấp độ trong suốt cho trình giữ chỗ theo mặc định, vì vậy cần thêm độ mờ 1 vào css của bạn, cộng với màu sắc, không phải vậy một mối quan tâm lớn hầu hết thời gian, nhưng tốt để có chúng nhất quán:

*::-webkit-input-placeholder { /* WebKit browsers */
    color:    #ccc;
}
*:-moz-placeholder { /* Mozilla Firefox <18 */
    color:    #ccc;
    opacity:  1;
}
*::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #ccc;
    opacity:  1;
}
*:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:    #ccc;
}

Bạn có thể thay đổi màu giữ chỗ của đầu vào HTML5 bằng CSS. Nếu tình cờ, xung đột CSS của bạn, ghi chú mã này hoạt động, bạn có thể sử dụng (! Quan trọng) như bên dưới.

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

<input placeholder="Stack Snippets are awesome!">

Hy vọng điều này sẽ giúp.

Bạn có thể sử dụng điều này cho kiểu đầu vào và tiêu điểm:

input::-webkit-input-placeholder  { color:#666;}
input:-moz-placeholder  { color:#666;}
input::-moz-placeholder { color:#666;}
input:-ms-input-placeholder  { color:#666;}
/* focus */
input:focus::-webkit-input-placeholder { color:#eee; }
input:focus:-moz-placeholder { color:#eee } /* FF 4-18 */
input:focus::-moz-placeholder { color:#eee } /* FF 19+ */
input:focus:-ms-input-placeholder { color:#eee } /* IE 10+ */

Cách dễ nhất sẽ là:

#yourInput::placeholder {
    color: red;/*As an example*/
}
/* if that would not work, you can always try styling the attribute itself: */
#myInput[placeholder] {
    color: red;
}

La bàn có một mixin cho điều này ra khỏi hộp.

Lấy ví dụ của bạn:

<input type="text" placeholder="Value">

Và trong SCSS sử dụng la bàn:

input[type='text'] {
  @include input-placeholder {
    color: #616161;
  }
}

Xem tài liệu cho mixin giữ chỗ đầu vào.

Đây là giải pháp với bộ chọn CSS

::-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 { /* Microsoft Edge */
   color:    #909;
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #909;
}

• WebKit, Blink (Safari, Google Chrome, Opera 15+) và Microsoft Edge đang sử dụng yếu tố giả:
  :: - webkit-input-placeholder.
• Mozilla Firefox 4 đến 18 đang sử dụng lớp giả
  :: -moz-giữ chỗ (một dấu hai chấm).
  Mozilla Firefox 19+ đang sử dụng phần tử giả:
  :: - giữ chỗ moz, nhưng bộ chọn cũ vẫn sẽ hoạt động trong một thời gian.
• Internet Explorer 10 và 11 đang sử dụng một lớp giả
  :: -ms-input-placeholder.
• Internet Explorer 9 trở xuống hoàn toàn không hỗ trợ thuộc tính giữ chỗ, trong khi Opera 12 trở xuống không hỗ trợ bất kỳ bộ chọn CSS nào cho trình giữ chỗ.

Một phần của HTML:

 <form action="www.anything.com">
 <input type="text" name="name"
  placeholder="Enter sentence"/>
  </form>

Tôi sẽ chỉ cho bạn cách thay đổi màu biểu thức của 'Nhập câu' bằng CSS:

  ::placeholder{
  color:blue;
   }