Trong hướng dẫn này, chúng tôi sẽ giải thích các phương pháp khác nhau để thay đổi màu của trình giữ chỗ đầu vào bằng cách sử dụng CSS.
Phương pháp 1: Thay đổi màu trình giữ chỗ đầu vào bằng bộ chọn “:: trình giữ chỗ”
CSS “ :: trình giữ chỗ ”Bộ chọn được sử dụng để chọn các thành phần biểu mẫu có văn bản giữ chỗ. Nó có thể được sử dụng để thay đổi văn bản giữ chỗ. Ngoài ra, bạn có thể sử dụng bộ chọn này để sửa đổi màu của trình giữ chỗ đầu vào.
Cú pháp
Cú pháp của :: placeholder như sau:
:: trình giữ chỗ {
màu sắc : giá trị
}
Thay cho “ giá trị ”, Bạn có thể đặt màu của trình giữ chỗ đầu vào theo lựa chọn của chúng tôi.
Hãy chuyển sang ví dụ thực tế, nơi chúng ta sẽ thay đổi màu của trình giữ chỗ đầu vào.
Thí dụ
Để thay đổi màu trình giữ chỗ đầu vào, trước tiên, chúng tôi sẽ tạo phần tử đầu vào bằng thẻ và đặt loại đầu vào là “ chữ ”. Tiếp theo, đặt văn bản của trình giữ chỗ đầu vào là “ đi vào tên của bạn ”.
HTML
< thân hình >< đầu vào loại hình = 'chữ' trình giữ chỗ = 'Điền tên của bạn' >
< / thân hình >
Đầu ra của mã đã cho là:
Màu mặc định của trình giữ chỗ đầu vào được hiển thị trong hình ảnh đã cho ở trên.
Bây giờ, chúng tôi chuyển sang CSS và sử dụng “ :: trình giữ chỗ ”Để truy cập văn bản của trình giữ chỗ đầu vào và đặt màu của nó là“ rgb (17, 0, 255) ”.
CSS
:: trình giữ chỗ {màu sắc : rgb ( 17 , 0 , 255 ) ;
}
Như bạn có thể thấy, màu của trình giữ chỗ đầu vào đã thêm được thay đổi thành màu xanh lam:
Có một phương pháp khác để thay đổi màu của trình giữ chỗ đầu vào. Hãy cùng kiểm tra nào.
Phương pháp 2: Thay đổi màu trình giữ chỗ đầu vào bằng phần tử giả lớp “:: - webkit-input-placeholder”
“ :: - webkit-input-placeholder ”Phần tử lớp giả chủ yếu đại diện cho văn bản giữ chỗ của phần tử biểu mẫu. Nó có thể được các nhà thiết kế và nhà phát triển chủ đề sử dụng để tùy chỉnh giao diện của văn bản giữ chỗ. Ngoài ra, bằng cách sử dụng phần tử được chỉ định, người dùng có thể sửa đổi màu của trình giữ chỗ đầu vào.
Cú pháp
Cú pháp của :: - webkit-input-placeholder được cung cấp như sau:
:: -webkit-input-placeholder {màu sắc : giá trị
}
Thay cho “ giá trị ”, Bạn có thể đặt màu của trình giữ chỗ đầu vào.
Hãy chuyển sang ví dụ để hiểu phần tử lớp giả đã thảo luận ở trên.
Thí dụ
Trong tệp CSS, hãy sử dụng “ :: - webkit-input-placeholder 'Phần tử lớp giả và gán giá trị của màu là' rgb (255, 13, 13) ”:
:::: -webkit-input-placeholder {màu sắc : rgb ( 255 , 13 , 13 ) ;
}
Đầu ra
Tại đây, bạn có thể thấy rằng màu mặc định của trình giữ chỗ đầu vào đã được thay đổi.
Sự kết luận
Màu của trình giữ chỗ đầu vào được thay đổi bằng cách sử dụng “ :: trình giữ chỗ 'Bộ chọn và' :: - webkit-input-placeholder ”Phần tử lớp giả. Sử dụng điều này, bạn có thể thay đổi màu mặc định của trình giữ chỗ đầu vào. Trong bài viết này, chúng tôi đã giải thích thủ tục liên quan đến việc thay đổi màu của trình giữ chỗ đầu vào bằng cách sử dụng thuộc tính CSS.