css - thay đổi màu placeholder và biểu tượng xóa cho thanh tìm kiếm ion mà không áp dụng toàn cục?

Tôi có hai thanh tìm kiếm ion, tôi cần thay đổi màu của placeholder và biểu tượng xóa chỉ cho một trong số chúng.

<ion-searchbar class="search-bar"
                placeholder="search"></ion-searchbar>

Tôi cần thay đổi màu của placeholder và biểu tượng xóa chỉ riêng cho ion-searchbar này, không thay đổi toàn cục để các ion-searchbar khác vẫn giữ màu mặc định... ai có ý tưởng gì không. Cảm ơn trước.

Câu trả lời #1

Đây là một giải pháp nếu bạn đang xử lý việc này bằng CSS: sử dụng thuộc tính [style] và gọi một hàm sẽ trả về lớp chính xác mà bạn muốn.

     @Component({
      selector: 'my-app',
      template: `
<ion-searchbar [style]="getStyle()" class="search-bar"
                placeholder="search"></ion-searchbar>
      `
    })
    export class App {

      getStyle() {
        // snip snip -> fetch the url from somewhere
        const profilePicUrl = 'some-remote-server-url.jpg';
        const style = `background-image: url(${profilePicUrl})`;
        return style;
      }

    }

Câu trả lời #2

tôi đã tìm ra một giải pháp chỉ bằng CSS:

 .searchbar-input-container{
          .searchbar-input{
            &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
              color: white;
            }
            &::-moz-placeholder { /* Firefox 19+ */
              color: white;
            }
            &:-ms-input-placeholder { /* IE 10+ */
              color: white;
            }
            &:-moz-placeholder { /* Firefox 18- */
              color: white;
            }
          }
          .searchbar-clear-icon{
            filter: invert(100);
          }

thay đổi màu của chỗ giữ chỗ thành màu trắng và lọc invert(100) phản chiếu màu đen thành màu trắng (không phải là giải pháp tối ưu nhưng thay vì thay đổi URL hình ảnh bạn có thể làm như vậy)