Làm thế nào để loại bỏ x và lên/xuống các yếu tố mũi tên của một ngày đầu vào?

Question

Điều duy nhất tôi cần hiển thị trong hộp có hình tam giác màu cam và tôi không chắc chắn mình có cần CSS hay thứ gì khác để loại bỏ hai phần tử bên trái tam giác hay không.

Có cách nào để làm như vậy không? Tôi chỉ sử dụng kiểu đầu vào date.

Fiddle: http://jsfiddle.net/5M2PD/1/

Answer 1

Sử dụng pseudo-class -webkit-inner-spin-button để định dạng cụ thể cho các trình duyệt webkit-based:

http://jsfiddle.net/5M2PD/2/

input[type=date]::-webkit-inner-spin-button { 
    -webkit-appearance: none; 
    display: none; 
} 

Nếu bạn muốn thay đổi phong cách của mũi tên thả xuống, sử dụng lớp giả -webkit-calendar-picker-indicator:

input[type=date]::-webkit-calendar-picker-indicator { 
    -webkit-appearance: none; 
    display: none; 
} 

Để loại bỏ nút rõ ràng, thiết lập các đầu vào cần thiết:

http://jsfiddle.net/5M2PD/3/

<input type="date" required="required" /> 

Answer 2

Để xóa nút rõ ràng, sử dụng này:

::-webkit-clear-button 
{ 
    display: none; /* Hide the button */ 
    -webkit-appearance: none; /* turn off default browser styling */ 
} 

Là một mặt lưu ý, để thực hiện việc này trong IE10 + (source), hãy sử dụng:

::-ms-clear { } 

Lưu ý rằng thao tác này hoạt động trên <input type="text" />, vì bây giờ IE cũng đặt một nút rõ ràng ở đó.

Để tạo kiểu cho phần còn lại của kiểm soát ngày trong trình duyệt WebKit, tôi khuyên bạn nên xem this link. Để tóm tắt, bạn có thể chơi với các lớp giả sau:

::-webkit-datetime-edit { } 
::-webkit-datetime-edit-fields-wrapper { } 
::-webkit-datetime-edit-text { } 
::-webkit-datetime-edit-month-field { } 
::-webkit-datetime-edit-day-field { } 
::-webkit-datetime-edit-year-field { } 
::-webkit-inner-spin-button { } 
::-webkit-calendar-picker-indicator { } 

Tôi cũng khuyên bạn nên sử dụng các cách sau để tắt kiểu trình duyệt mặc định; Tôi thấy tính năng này đặc biệt hữu ích khi làm việc với trình duyệt trên thiết bị di động:

input[type="date"] 
{ 
    -webkit-appearance: none; 
}