Có thể tạo kiểu văn bản giữ chỗ mặc định trên yếu tố loại đầu vào HTML5 = "ngày" không? trong Chrome?

Question

Tôi có một biểu mẫu có danh sách các ngày trên đó và tôi đang sử dụng phần tử HTML 5 input type="date" để đại diện cho chúng. Tôi muốn thay đổi màu của các trường không có giá trị (nghĩa là các trường hiển thị dd/mm/yyyy) để chúng dễ phân biệt hơn với các trường có chứa ngày thực tế.

Điều này có khả thi không? Tôi nghĩ rằng -webkit-input-placeholder có thể đã làm những gì tôi muốn, nhưng có vẻ như không.

Answer 1

Không có trình giữ chỗ nào trong mục nhập ngày trong Chrome. Nếu bạn chọn "Hiển thị bóng DOM" trong cài đặt DevTools', bạn sẽ có thể kiểm tra nó:

<input type="date"> 
    #document-fragment 
    <div dir="ltr" pseudo="-webkit-date-and-time-container"> 
     <div pseudo="-webkit-datetime-edit"> 
     <span aria-help="Day" aria-valuemax="31" aria-valuemin="1" pseudo="-webkit-datetime-edit-day-field" role="spinbutton">dd</span> 
     <div pseudo="-webkit-datetime-edit-text">/</div> 
     <span aria-help="Month" aria-valuemax="12" aria-valuemin="1" pseudo="-webkit-datetime-edit-month-field" role="spinbutton">mm</span> 
     <div pseudo="-webkit-datetime-edit-text">/</div> 
     <span aria-help="Year" aria-valuemax="275760" aria-valuemin="1" pseudo="-webkit-datetime-edit-year-field" role="spinbutton">yyyy</span></div> 
     <div></div> 
     <div pseudo="-webkit-calendar-picker-indicator"></div> 
    </div> 
</input> 

Bạn có thể tạo kiểu yếu tố riêng biệt sử dụng pseudos của họ (chỉ hoạt động trong Chrome Canary):

::-webkit-datetime-edit-year-field { 
    font-weight: bold; 
} 

Answer 2

Thuộc tính placeholder hiện không được hỗ trợ bởi các trường nhập với type="date" và không thể được tạo kiểu. Hãy nhìn vào danh sách các thuộc tính hợp lệ:

w3.org: "input type=date – date input control"

Vì vậy, Chrome đang thực sự làm việc đó ngay trong trái với Safari, mà không quan tâm đến date -type ở tất cả.

Answer 3

Nhờ các câu trả lời hiện có mà tôi đã quản lý để làm việc đó. Các trường tháng và năm chỉ nhận được thuộc tính aria-valuetext khi trường ngày có giá trị. Điều này có nghĩa rằng tôi có thể tạo kiểu những giá trị này khi trường ngày của hiển thị giá trị mặc định của nó như thế này:

::-webkit-datetime-edit-day-field:not([aria-valuetext]), 
::-webkit-datetime-edit-month-field:not([aria-valuetext]), 
::-webkit-datetime-edit-year-field:not([aria-valuetext]) 
{ 
    color: #999; 
} 

Answer 4

Tính đến Chrome 31 (có thể sớm hơn), aria-valuetext là 'trống' chứ không phải là null. Một trong các công việc sau đây

::-webkit-datetime-edit-year-field[aria-valuetext=blank] 
::-webkit-datetime-edit-year-field:not([aria-valuenow]) 

hơn:

::-webkit-datetime-edit-year-field:not([aria-valuetext]) 

(I Do không có đại diện nhận xét về câu trả lời liên quan)

Answer 5

tôi muốn "giữ chỗ" text được màu xám. Dựa trên câu trả lời @ JackBradford, tôi đang sử dụng:

::-webkit-datetime-edit-text, /* this makes the slashes in dd/mm/yyyy grey */ 
::-webkit-datetime-edit-day-field[aria-valuetext=blank], 
::-webkit-datetime-edit-month-field[aria-valuetext=blank], 
::-webkit-datetime-edit-year-field[aria-valuetext=blank] { 
    color: lightgrey; 
}