Thực đơn
trang chủiOS

Làm cách nào để thay đổi màu trong phần giữ chỗ. Cách thay đổi màu văn bản thay thế của trường biểu mẫu


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à tin tức nữa 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 cái phổ biến cho việc này plugin jquery- 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; )

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 mong đợi. 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.

    Xin chào, hôm nay bạn sẽ không làm ai ngạc nhiên khi sử dụng trình giữ chỗ để nhập liệu. Trình giữ chỗ là văn bản tạm thời có ví dụ bên trong phần nhập sẽ biến mất khi bạn nhập văn bản. kiểu CSSđể giữ chỗ, chúng tôi sẽ cố gắng đăng ký ngay hôm nay.

    Nhiệm vụ: tạo kiểu CSS của riêng bạn cho trình giữ chỗ

    Giả sử chúng ta có một trang web phong cách sử dụng trình giữ chỗ trong đầu vào. Chúng ta cần làm cho kiểu văn bản giữ chỗ màu xám buồn tẻ trông giống như phong cách chungđịa điểm. Làm thế nào điều này có thể đạt được? Tôi sẽ nói ngay rằng tính năng này chưa hoạt động trên tất cả các trình duyệt. Cụ thể, nó hoàn toàn không hoạt động trong phiên bản IE 9 trở xuống; từ phiên bản 10 trở xuống, nó vẫn hoạt động rất khó khăn. Trình duyệt Firefox và webkit lại là một vấn đề khác.

    Giải pháp: kiểu css cho trình giữ chỗ

    Vậy chúng ta đã đặt ra nhiệm vụ, vậy chúng ta sẽ giải quyết nó như thế nào?

    Đầu tiên, hãy tạo một nơi thử nghiệm:

    Xong, bây giờ hãy xem chúng ta có thể làm gì với kiểu này: webkit và mozilla có công cụ sửa đổi riêng cho phép bạn gán một kiểu đặc biệt cho trình giữ chỗ: ::-webkit-input-placeholder và:-moz-placeholder. Hãy xem cách sử dụng chúng:

    Hãy mô tả kiểu của chính đầu vào và văn bản trong đó ( Màu xanhđể tương phản trong ví dụ):

    Đầu vào (chiều rộng: 250px; màu: xanh lam; độ dày phông chữ: bình thường; kiểu phông chữ: bình thường;)

    Bây giờ, hãy viết một kiểu đặc biệt cho văn bản giữ chỗ trong kiểu nhập này cho trình duyệt Webkit (Chrome, Safari, Opera):

    Đầu vào::-webkit-input-placeholder( màu: đỏ; kiểu phông chữ: in nghiêng; độ dày phông chữ: in đậm; )

    Hãy làm cho văn bản giữ chỗ có màu đỏ in nghiêng đậm. Lưu ý rằng không giống như các lớp giả CSS khác, được phân tách bằng dấu hai chấm, kiểu dành cho trình giữ chỗ trong webkit được phân tách bằng dấu hai chấm kép.

    Bây giờ hãy viết chính xác cùng một phong cách cho Mozilla Firefox trình duyệt:

    Đầu vào:-moz-placeholder( màu: đỏ; kiểu phông chữ: in nghiêng; độ dày phông chữ: đậm; )

    Sẵn sàng. Kiểu CSS cho trình giữ chỗ, tất nhiên bạn có thể viết bất kỳ kiểu nào phù hợp hơn với thiết kế của mình. Bạn có thể xem bản demo hoạt động trên jsFiddle hoặc ngay bên dưới:

    Tôi hy vọng bài viết này sẽ giúp bạn làm cho trang web của bạn thân thiện hơn với người dùng.

    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 hầu hết các trình duyệt hiện đại bằng cách sử dụng các 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+ */ màu: hồng; ) :-moz-placeholder ( /* Firefox 18- */ màu: hồng; )

    Cảnh báo: Đây là cú pháp không chuẩn và có những tên lạ đi kèm. :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 nhằm mục đích làm nổi bật biểu mẫu đầu vào và Trình giữ chỗ CSS màu sắc 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:

    • thuộc tính phông chữ;
    • màu sắc ;
    • thuộc tính nền;
    • 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 ;
    • độ mờ đục ;
    Tài nguyên bổ sung

    Tài liệu MDN
    Tài liệu IE
    Bài viết chi tiết trên blog Treehouse

    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ề việc 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ợ 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 hơn trình duyệt firefox, webkit và flash được coi là 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 này sẽ cho phép bạn rút ngắn văn bản giữ chỗ trong trường nhập.

    Đầ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: