Đặt màu giữ chỗ. Cách thay đổi màu giữ chỗ bằng css

Các phần tử đầu vào có thuộc tính "giữ chỗ". Với sự trợ giúp của nó, bạn có thể hiển thị văn bản trong trường nhập sẽ biến mất khi bạn bắt đầu điền nó. Các trình duyệt hiển thị trình giữ chỗ khác nhau và những trình duyệt lỗi thời hoàn toàn không hỗ trợ nó. Tuy nhiên, có nhiều cách để khắc phục mọi nhược điểm của thuộc tính hữu ích này. Hãy xem xét các điểm sau:

thay đổi kiểu giữ chỗ;
ẩn ngay lập tức khi bạn nhấp vào một trường;
hiển thị trong các trình duyệt không hỗ trợ thuộc tính này.

Ví dụ: hãy lấy trường văn bản đầu vào và áp dụng kiểu cho nó.

Thay đổi màu giữ chỗ

Các trình duyệt trên các công cụ khác nhau hiển thị phần giữ chỗ khác nhau. Thông thường đây là văn bản màu đen có độ trong suốt, cuối cùng trông giống như màu xám. Để thay đổi màu sắc và độ trong suốt, bạn cần chỉ định các lệnh bổ sung cho công cụ trình duyệt theo kiểu CSS cho các thành phần đầu vào. Hãy thay đổi màu thành màu đỏ mà không trong suốt.

::-webkit-input-placeholder (color:#f00; opacity:1;)/* webkit */ ::-moz-placeholder (color:#f00; opacity:1;)/* Firefox 19+ */ :- moz-placeholder (color:#f00; opacity:1;)/* Firefox 18- */ :-ms-input-placeholder (color:#f00; opacity:1;)/* IE */

Nếu bạn không chỉ định "độ mờ", màu sẽ có màu hồng trong các trình duyệt hỗ trợ độ trong suốt. Bạn cũng có thể chỉ định các màu khác nhau cho các trường khác nhau. Để làm điều này, hãy sử dụng các lớp.

Đầu vào-1::-webkit-input-placeholder ( color:red; ) .input-2::-webkit-input-placeholder ( color:green; ) ... v.v.

Xóa phần giữ chỗ khi nhấp vào một trường

Theo mặc định, trình duyệt chỉ ẩn phần giữ chỗ sau khi bạn bắt đầu nhập. Nhưng không khó để làm cho nó biến mất ngay sau khi đặt con trỏ vào trường nhập. Để làm điều này, chúng tôi sẽ viết một kiểu cho các trường có trọng tâm, trong đó chúng tôi sẽ làm cho chú giải công cụ hoàn toàn trong suốt.

:focus::-webkit-input-placeholder (opacity:0;)/* webkit */ :focus::-moz-placeholder (opacity:0;)/* Firefox 19+ */ :focus:-moz-placeholder ( opacity:0;)/* Firefox 18- */ :focus:-ms-input-placeholder (opacity:0;)/* IE */

Bạn có thể ẩn phần giữ chỗ trong quá trình forcus theo nhiều cách khác nhau, chẳng hạn như bằng cách thay đổi độ trong suốt hoặc màu sắc một cách mượt mà. Và bạn có thể cấu hình hoạt hình css, khi gợi ý di chuyển trơn tru ra khỏi trường. Tất cả điều này có thể thực hiện được là nhờ CSS, nhưng tôi không thấy có nhiều ý nghĩa trong đó, vì khả năng tương thích giữa nhiều trình duyệt của những thú vui như vậy sẽ bị ảnh hưởng và thực tế không có lợi ích gì từ những hiệu ứng này.

Trình giữ chỗ tương thích trên nhiều trình duyệt

Các trình duyệt cũ không hỗ trợ thuộc tính "giữ chỗ" - đơn giản là nó sẽ không được hiển thị. Các trình duyệt như vậy bao gồm IE8. Mặc dù đã hết hỗ trợ trình duyệt web IE, có “người” sử dụng nó. Nếu phần giữ chỗ không mang theo Thông tin quan trọng, thì bạn có thể quên hiển thị của nó, nhưng nếu mọi người đều thấy nội dung của chú giải công cụ thì nhà phát triển có nghĩa vụ phải quan tâm đến khả năng tương thích hoàn toàn giữa các trình duyệt.

Để hiển thị chú giải công cụ trong các trình duyệt không hỗ trợ thuộc tính này, chúng tôi sẽ sử dụng plugin jquery.

Tải về nó và kết nối. Đừng quên rằng nó phải được kết nối theo cùng một cách thư viện jquery. Áp dụng plugin cho các phần tử đầu vào có thuộc tính “placeholder”:

$(function())( $("input, textarea").placeholder(); )); input.placeholder, textarea.placeholder. ( màu xanh lá cây; )

Plugin chỉ hoạt động nếu trình duyệt không hỗ trợ trình giữ chỗ. Trong trường hợp này, các phần tử được áp dụng nó sẽ được gán lớp “giữ chỗ” và văn bản từ thuộc tính “giữ chỗ” được ghi vào “giá trị”. Khi lấy nét, "giá trị" sẽ bị xóa. Để ngăn văn bản từ thuộc tính trông giống hệt với văn bản đầu vào, chúng tôi tạo kiểu cho văn bản đó bằng cách sử dụng các kiểu, dựa trên lớp đã cài đặt. Trong ví dụ, màu văn bản của trường không hoạt động sẽ có màu xanh lục. Nhưng bạn chỉ có thể thấy điều này trong IE8 hoặc các trình duyệt cũ khác.

Hướng dẫn này sẽ chỉ cho bạn cách thay đổi màu văn bản giữ chỗ của trường biểu mẫu.

Văn bản giữ chỗ của trường biểu mẫu chứa chú giải công cụ cho biết dữ liệu dự kiến trong trường. Đây có thể là một ví dụ hoặc Mô tả ngắn thông tin dự kiến. Một gợi ý ngắn được hiển thị trong trường trước khi người dùng bắt đầu nhập dữ liệu.

Theo mặc định, văn bản thay thế có màu xám nhạt (đó là cách trình duyệt hiển thị nó). Để thêm vào văn bản này phong cách tùy chỉnh Bạn sẽ cần sử dụng tiền tố trình duyệt cho các thuộc tính CSS.

Để thay đổi màu của văn bản thay thế, hãy làm theo các hướng dẫn sau:

Mã theo các thông tin sau(lưu ý rằng bạn cần thêm cùng một mã 4 lần cho mỗi tiền tố trình duyệt):

Chọn tệp mà bạn sẽ thêm mã vào. Bạn có thể thêm nó vào bất kỳ tệp CSS nào trên trang web của mình, nhưng chúng tôi đã chuẩn bị cho bạn danh sách các tệp mà bạn nên thêm vào đó. Quy tắc CSS Vì các loại khác nhau công cụ trang web:

Mẫu CMS:

Chủ đề WordPress (Chủ đề WooC Commerce/Jigoshop) /wp-content/themes/themeXXXXX/style.css
Mẫu Joomla (Mẫu VirtueMart) /templates/themeXXXX/css/template.css
Chủ đề Drupal /sites/all/themes/themeXXX/css/style.css
Mẫu web (HTML5) /css/style.css

Mẫu thương mại điện tử:

Chủ đề Magento /skin/frontend /default/themeXXX/css/styles.css
Chủ đề PrestaShop /themes/themeXXXX/css/global.css
Chủ đề OpenCart /catalog/view/theme/themeXXX/stylesheet /stylesheet .css
Chủ đề ZenCart /includes/templates/themeXXX/css/stylesheet .css
Mẫu osCommerce /css/stylesheet.css
Mẫu Shopify style.css.liquid

Lưu thay đổi và tải lên Tệp CSSđến máy chủ của bạn.

Nhiều bạn thường xuyên gặp những biểu mẫu có chữ ký làm gợi ý. Chúng biến mất khi gõ. Vì vậy, đây là thuộc tính giữ chỗ, hiện diện trên các phần tử được tạo để nhập văn bản (input). Sử dụng nó, bạn có thể đặt văn bản sẽ được hiển thị dưới dạng gợi ý trước khi bạn bắt đầu nhập vào trường này. Thật không may, không phải tất cả các trình duyệt đều hoạt động chính xác như nhau với thuộc tính này. Phiên bản lỗi thời và văn bản này hoàn toàn không được hiển thị.

Bây giờ hãy xem cách giải quyết các vấn đề được mô tả dưới đây:

1. Cách thay đổi kiểu giữ chỗ;
2. Cách ẩn văn bản giữ chỗ không phải khi bạn nhập mà khi bạn nhấp vào trường;
3. Phải làm gì với các trình duyệt không hiển thị phần giữ chỗ về nguyên tắc.

Trong tất cả các ví dụ, chúng tôi sẽ làm việc với trường đầu vào.

Làm cách nào để thay đổi màu của văn bản chú giải công cụ trong phần giữ chỗ trong đầu vào? Không còn là chuyện lạ khi mỗi trình duyệt không chỉ hiển thị các phần giữ chỗ khác nhau mà còn yêu cầu các thuộc tính đặc biệt để thay đổi kiểu. Và tôi thậm chí không nói về các tiền tố tương ứng trong cách viết. Hãy nhìn vào chúng.

Màu chú giải công cụ mặc định trong nhiều trình duyệt là màu xám. TRONG trong ví dụ này Hãy làm cho nó màu đen.

::-webkit-input-placeholder (color:#000000; opacity:1;)/* webkit */
::-moz-placeholder (color:#000000; opacity:1;)/* Firefox 19+ */
:-moz-placeholder (color:#000000; opacity:1;)/* Firefox 18- */
:-ms-input-placeholder (màu:#000000; độ mờ:1;)/* IE */

Thuộc tính độ mờ, chịu trách nhiệm về tính minh bạch, phải được nhập cho những trình duyệt hỗ trợ tính minh bạch cho của phần tử này. Nếu không thì màu mặc định sẽ là màu xám.

Và vâng, bạn có thể sử dụng các lớp để chỉ định các thuộc tính này. Nhìn bên dưới:

Điện thoại đầu vào::-webkit-input-placeholder ( color:red; )
.input-text::-webkit-input-placeholder ( color:green; )
/* và như thế... */

Xóa trình giữ chỗ khi nhấp vào một trường Theo mặc định, trong trình duyệt, văn bản từ thuộc tính giữ chỗ chỉ biến mất sau khi bắt đầu nhập, nhưng có những người muốn văn bản này không bị phân tâm ở giai đoạn nhấp vào trường đầu vào. Hầu hết họ thường làm điều đó. Để làm điều này, bạn cần viết kiểu cho tiêu điểm, trong đó màu của văn bản chú giải công cụ sẽ trở nên hoàn toàn trong suốt, tức là nó sẽ không hiển thị nữa.

:focus::-webkit-input-placeholder (độ mờ:0;)/* webkit */
:focus::-moz-placeholder (độ mờ:0;)/* Firefox 19+ */
:focus:-moz-placeholder (độ mờ:0;)/* Firefox 18- */
:focus:-ms-input-placeholder (độ mờ:0;)/* IE */

Bạn thậm chí có thể thiết lập thay đổi mượt mà về độ trong suốt hoặc thay đổi màu sắc bằng hoạt ảnh CSS. Nhưng có thể có vấn đề về khả năng tương thích giữa nhiều trình duyệt của các giải pháp như vậy.

Còn những trình duyệt không hỗ trợ thuộc tính giữ chỗ trong đầu vào thì sao? Chà, chắc chắn đừng để bị lạc) Vâng, thực sự, có những trình duyệt như vậy. Ví dụ: IE8. Và vâng, có những người lão luyện sẽ luôn sử dụng nó. Nếu bạn cần đưa ra giải pháp cho tất cả khách truy cập thì hãy kiên nhẫn hơn một chút.

Để giải quyết vấn đề này, hãy tải xuống plugin jquery phổ biến cho vấn đề này - jquery.placeholder. Tôi sẽ không cung cấp liên kết vì chúng sẽ thay đổi vào hôm nay hoặc ngày mai. Tuy nhiên, nếu có, bạn có thể tải xuống một ví dụ hoạt động bằng plugin - tải xuống nguồn.

Hãy kết nối nó. Đừng quên rằng bạn cũng cần kết nối jquery.

$(hàm())(
$("đầu vào, vùng văn bản").placeholder();
});

input.placeholder, textarea.placeholder. ( màu xanh lá cây; )

Nếu bạn không quen với thuộc tính giữ chỗ, hãy giải thích một chút về nó và nơi nó được sử dụng. Nó được sử dụng trong các trường nhập biểu mẫu. Thuộc tính hiển thị một văn bản trong trường đầu vào, thể hiện vai trò của một gợi ý nhất định. Trước đó trên trang web của chúng tôi đã có một ví dụ, với sử dụng javascript, mặt tích cực phương pháp này Nó tương thích với nhiều trình duyệt. Bây giờ hãy nói về cách tạo kiểu cho thuộc tính giữ chỗ, được sử dụng trên các phần tử đầu vào và vùng văn bản.
Mã trường đầu vào trong ví dụ của chúng tôi sẽ trông giống như thế này:

Ở đầu ra, chúng ta nhận được trường sau:

Bây giờ hãy tưởng tượng rằng chúng ta cần tạo kiểu cho phần giữ chỗ, để làm được điều này, chúng ta cần viết một bộ quy tắc trong CSS:

::-webkit-input-placeholder ( color: #c1c1c1; ) ::-moz-placeholder ( color: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( color: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( color: #c1c1c1; )

Chúng tôi nhận được:

Chúng tôi không thể thay đổi tất cả các thuộc tính, nhưng danh sách hầu hết chúng được hỗ trợ bởi các trình duyệt hiện đại được đưa ra dưới đây:
phông chữ (cũng thuộc tính liên quan)
nền (cũng thuộc tính liên quan)
màu sắc
khoảng cách từ
khoảng cách chữ
trang trí văn bản
căn chỉnh theo chiều dọc
chuyển đổi văn bản
chiều cao giữa các dòng
thụt lề văn bản
tràn văn bản
độ mờ đục

TRONG các trình duyệt khác nhau quy tắc được viết khác nhau, bởi vì Chưa tiêu chuẩn thống nhất, bộ hồ sơ này vẫn tiếp tục tồn tại. Trong trình duyệt IE, cũng như firefox dưới phiên bản 18, trình giữ chỗ được coi là một lớp giả và trong các trình duyệt mới firefox, webkit và Blink, nó được coi là một phần tử giả.

Rút ngắn văn bản trong phần giữ chỗ
Đôi khi chú giải công cụ có thể dài đến mức chúng không thể hoàn toàn khớp với trường nhập liệu. Đối với những mục đích này, bạn cũng có thể sử dụng thuộc tính bổ sungđiều đó sẽ làm giảm Văn bản giữ chỗ trong trường đầu vào.

Đầu vào ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow :dấu chấm lửng; )

Kết quả là chúng ta nhận được một trường đầu vào có phần giữ chỗ như thế này:

Ẩn văn bản khi nhấp vào một trường
Theo mặc định, mỗi trình duyệt diễn giải phản hồi của trình giữ chỗ một cách khác nhau. Trong một số trình duyệt, nó bị ẩn ngay lập tức khi bạn nhấp vào trường, ở những trình duyệt khác, nó bị ẩn khi có ít nhất một ký tự trong trường nhập. Hãy làm cho văn bản biến mất khi bạn nhấp vào trường, điều này giống nhau trên tất cả các trình duyệt.

:focus::-webkit-input-placeholder ( color: Transparent; ) :focus::-moz-placeholder ( color: Transparent; ) :focus:-moz-placeholder ( color: Transparent; ) :focus:-ms-input -placeholder ( màu: trong suốt; )

Chúng tôi nhận được hành động này:

Màu pseudo-element::placeholder (trong một số trường hợp là pseudo-class) cho phép bạn đặt nội dung văn bản của một thành phần biểu mẫu. Nó được thiết lập bằng cách sử dụng thuộc tính placeholder:.

Văn bản này có thể được tạo kiểu cho phù hợp với hầu hết trình duyệt hiện đại sử dụng tiền tố đặc biệt:

::-webkit-input-placeholder ( /* Chrome/Opera/Safari */ color: pink; ) ::-moz-placeholder ( /* Firefox 19+ */ color: pink; ) :-ms-input-placeholder ( /* IE 10+ */ color: pink; ) :-moz-placeholder ( /* Firefox 18- */ color: pink; )

Cảnh báo: Đây là cú pháp không chuẩn và có những cái tên lạ đi kèm với nó. :placeholder-shown là một tiêu chuẩn và ngay cả các tác giả của thông số kỹ thuật cũng có thể nghĩ rằng ::placeholder đã được tiêu chuẩn hóa.

Giống như bất kỳ phần tử giả nào, bạn có thể áp dụng nó cho một số yếu tố nhất định theo cách sau:

input.big-dog::-webkit-input-placeholder ( color: orange; )

Xem ví dụ

Sự khác biệt giữa:placeholder-showed và::placeholder

:placeholder-shown dùng để làm nổi bật biểu mẫu đầu vào và màu giữ chỗ CSS chịu trách nhiệm tạo kiểu cho văn bản.

Hãy nhìn vào sơ đồ:

Điều này hóa ra gây nhầm lẫn cho nhiều người và tôi thường thấy các thông số kỹ thuật có :placeholder-shown nhưng không có ::placeholder .

Cần lưu ý rằng :placeholder-shown có thể ảnh hưởng đến kiểu dáng của văn bản, vì nó dành cho nó phần tử cha(ví dụ: bạn có thể thay đổi cỡ chữ).

Lưu ý rằng :placeholder-shown là một lớp giả (một phần tử ở trạng thái cụ thể) và ::placeholder là một phần tử giả (phần hiển thị không có trong DOM). Chúng khác nhau ở dấu ngoặc đơn và dấu ngoặc kép.

Vì :placeholder-shown là một lớp giả nên nó phải làm nổi bật phần tử hiện có. Và do đó làm nổi bật biểu mẫu nhập khi văn bản trong thành phần biểu mẫu được hiển thị. Phần tử giả ::placeholder tự bao bọc văn bản giữ chỗ.

Phần tử hay lớp?

Trong kế hoạch này giữ chỗ đầu vào màu sắc không được chuẩn hóa. Điều này có nghĩa là mỗi trình duyệt có cách hiểu riêng về cách thức hoạt động của nó.

Lớp giả này ban đầu được triển khai trong Trình duyệt Firefox. Lớp giả này không có nhiều chỗ để ngọ nguậy. Ví dụ: nếu bạn muốn thay đổi màu của văn bản khi đánh dấu biểu mẫu nhập, bạn sẽ cần sử dụng bộ chọn như input:focus::placeholder . Nhưng lớp giả không cho phép điều này.

IE10 hỗ trợ chức năng này như một lớp giả chứ không phải một phần tử. Trong tất cả các trình duyệt khác, nó được coi là phần tử giả.

Màu giữ chỗ trong Firefox

Bạn sẽ nhận thấy rằng màu sắc của phần giữ chỗ trông xỉn màu so với các trình duyệt khác. Hình ảnh bên dưới hiển thị Firefox 43 ở bên trái và Chrome 47 ở bên phải:

Điều này xảy ra vì theo mặc định tất cả các sơ khai trong Firefox đều nhận được ý nghĩa bổ sung sự minh bạch. Để loại bỏ hiệu ứng này, chúng ta cần hàng tiếp theo mã số:

::-moz-placeholder ( độ mờ: 1; )

Hãy thử mở bản demo này trong Firefox.

Hỗ trợ phong cách

Phần tử giả hỗ trợ các thuộc tính sau: