Cách đặt màu giữ chỗ trong css đầu vào. Thêm kiểu CSS cho phần giữ chỗ
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 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:
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
- 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.
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ì vậy, chúng ta đã đặt ra nhiệm vụ, 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.
Trình giữ chỗ là một thành phần của trường đầu vào trong đó có thể đặt chú giải công cụ. Khi người dùng bắt đầu nhập dữ liệu, văn bản hỗ trợ sẽ biến mất để không gây cản trở. Mỗi trình duyệt có quan điểm riêng về cách hiển thị phần tử này và đôi khi các kiểu mặc định sẽ phá vỡ toàn bộ thiết kế. Để kiểm soát chúng, bạn cần sử dụng một công cụ đặc biệt quy tắc CSS giữ chỗ.
Trình giữ chỗ ở đâu?Vấn đề là chú giải công cụ của trường đầu vào bị ẩn chắc chắn trong Shadow DOM và không dễ dàng truy cập được. Đối với điều này, một ::placeholder phi tiêu chuẩn đặc biệt được sử dụng. Với sự trợ giúp của nó, bạn có thể quản lý các thuộc tính của chú giải công cụ.
Tạo kiểu cho phần giữ chỗ trong CSS trông như thế này:
Đầu vào::giữ chỗ ( color: red; opacity: 1; font-style: italic; )
Phần tử giả giữ chỗ CSS được tất cả các trình duyệt hiện đại xử lý tốt và để hỗ trợ các trình duyệt cũ hơn, bạn có thể sử dụng các tiền tố sau:
- ::-webkit-input-placeholder - dành cho trình duyệt webkit (Safari, Chrome, Opera);
- ::-moz-placeholder - cho Trình duyệt Firefox phiên bản trên 19;
- :-moz-giữ chỗ - cho Firefox cũ;
- :-ms-input-placeholder - cho trình duyệt web IE phiên bản trên 10.
Như bạn có thể thấy, cũ Trình duyệt Mozilla, cũng như IE, hãy coi trình giữ chỗ là lớp giả CSS, không phải phần tử giả. Đừng tranh cãi với họ, chúng ta sẽ chỉ tính đến khía cạnh này khi tạo kiểu cho trường nhập.
Bạn có thể đặt các tùy chọn sau cho phần tử giả giữ chỗ trong CSS:
- nền - nhóm khối chú giải công cụ áp dụng cho toàn bộ trường nhập. Bạn có thể đặt không chỉ màu (background-color) mà còn cả hình ảnh (background-image).
- màu văn bản - màu sắc;
- minh bạch - mờ đục;
- gạch chân, gạch chân hoặc gạch ngang - trang trí văn bản;
- trường hợp - chuyển đổi văn bản;
- phần đệm- đệm. Không được hỗ trợ bởi tất cả các trình duyệt. Đối với phần tử nội tuyến, phần đệm trên và dưới được bỏ qua.
- hiển thị phông chữ - thuộc tính của nhóm phông chữ, chiều cao dòng và các mức thụt lề khác nhau (thụt lề văn bản, khoảng cách chữ cái, khoảng cách từ);
- căn chỉnh theo chiều dọc trong dòng - căn dọc;
- cắt bớt văn bản khi vùng chứa tràn - text-overflow.
Theo mặc định, chú giải công cụ chỉ biến mất khỏi trường nhập nếu có ít nhất một ký tự được nhập vào đó. Nhưng trình giữ chỗ cho phép bạn thực hiện tính năng biến mất ngay lập tức khi lấy nét vào trường. Để làm điều này, bạn cần kết hợp nó với pseudo-class:focus.
Đầu vào:tiêu điểm::giữ chỗ ( color: Transparent; )
Trong một số trình duyệt, có thể tạo hiệu ứng thay đổi trong một số thuộc tính giữ chỗ bằng cách sử dụng câu lệnh chuyển tiếp.
Đầu vào::giữ chỗ ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )
TRONG trình duyệt Google Màu của chú giải công cụ Chrome khi lấy nét vào trường như vậy sẽ thay đổi mượt mà trong vòng một giây.
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ế... */
: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; )
