Văn bản trình giữ chỗ trong trường nhập bằng CSS chỉ (không có JavaScript)

Question

Thay vì gắn nhãn cho từng trường trong biểu mẫu, đôi khi thích hợp hơn (từ quan điểm thiết kế) để có văn bản giữ chỗ trong mỗi trường. Ví dụ, thay vì có này:

   ---------------------------------- 
Full Name: |         | 
      ---------------------------------- 

bạn có điều này:

---------------------------------- 
| Full Name      | 
---------------------------------- 

Các khi bạn nhấp trong lĩnh vực này, các văn bản biến mất và bạn có thể viết bất cứ điều gì bạn muốn. Nếu bạn bỏ qua trường mà không nhập bất kỳ văn bản nào, thì trình giữ chỗ sẽ xuất hiện trở lại.

Tôi đã thấy điều này được thực hiện theo nhiều cách, nhưng tất cả các phương pháp đều liên quan đến JavaScript. Ví dụ: Twitter thực hiện một công việc tốt trên signup page nhưng nếu Javascript bị tắt, bạn sẽ nhập tên của mình trên từ 'Tên đầy đủ'.

Tôi đang tìm phương thức chỉ CSS có thể hoạt động ngay cả khi JavaScript bị tắt. Giải pháp tiềm năng duy nhất tôi đưa ra là đặt nền của thẻ <input> thành hình ảnh của văn bản mong muốn và sau đó sử dụng lớp giả input:focus để xóa hình nền khi ai đó nhấp vào hộp văn bản. Điều này dường như làm việc nhưng nó sẽ được tốt đẹp không phải sử dụng hình ảnh.

Có ai biết tài nguyên tốt về cách thực hiện việc này không?

Answer 1

Đây là phương pháp ưa thích, và làm việc tại tất cả các trình duyệt hiện tại:

<input type="text" name="" placeholder="Full Name"/> 

Phiên bản này làm việc cho IE9 và trước:

<input type="text" name="" value="Full Name" onfocus="value=''" onblur="value='Full Name'"/> 

Answer 2

Bạn có thể thực hiện việc này với một số <label> được đặt phía sau chỉ mục sử dụng z-index và minh bạch background-color trên <input>. Sử dụng :focus để thay đổi thành nền trắng.

:first-line có một số sự cố Firefox.

Demo: http://jsfiddle.net/ThinkingStiff/bvJ43/

Lưu ý: Xem mã sushi của bình luận dưới đây cho các vấn đề làm mờ: Placeholder text in an input field with CSS only (no JavaScript)

Output:

HTML:

<label class="input">enter name<input /><label>​ 

CSS:

.input { 
    color: gray; 
    display: block; 
    font-size: small; 
    padding-top: 3px; 
    position: relative; 
    text-indent: 5px; 
} 

input { 
    background-color: transparent; 
    left: 0; 
    position: absolute; 
    top: 0; 
    z-index: 1; 
} 

input:focus, input:first-line { 
    background-color: white; 
} 

Answer 3

Hãy thử this: nó quyết định giữ chỗ và đa đầu vào trường hợp tràn. Bí quyết là di chuyển các nhãn đằng sau đầu vào của chúng và sắp xếp lại chúng một cách trực quan.

Bạn không cần thêm div để đạt được những gì bạn muốn.

Answer 4

Hãy thử điều này:

HTML

<div> 
    <input type="text" id="text"></input> 
    <label for="text">required</label> 
</div> 

CSS

.text-wrapper { 
    position: relative; 
} 
.text-input-label { 
    position: absolute; 
    /* left and right properties are based on margin, border, outline and padding of the input text field */ 
    left: 5px; 
    top: 3px; 
    color: #D1D1D1; 
} 
#text:focus + label { 
    display: none; 
} 

Working Fiddle

Answer 5

Tất cả các câu trả lời có lẽ là CSS-chỉ trên đã bỏ qua một thành phần quan trọng đó là cần thiết để ngăn chặn các nhãn hoạt động như một giả giữ chỗ từ "chảy máu thông qua "khi người dùng không còn tập trung vào trường cụ thể đó nữa.

Gợi ý:

input:valid { background-color:white; } 

Các pseudo-class :valid có được bất cứ khi nào một lĩnh vực có giá trị khác hơn ''. Vì vậy, khi người dùng của bạn nhập bất cứ điều gì trong lĩnh vực của riêng mình, nhãn được hiển thị ở đó sẽ ngừng hiển thị.

Được thông báo với các trường <input type="email" />, lớp giả :valid thực hiện và sẽ thực sự yêu cầu nhập định dạng email hợp lệ (ví dụ: "xxxx@xxx.com" - hoặc .net hoặc .org, v.v.).

hướng dẫn đầy đủ cách để làm điều này ở đây: http://css-tricks.com/float-labels-css/