Come sbarazzarsi degli elementi delle frecce x e su/giù di una data di input?

Question

L'unica cosa che ho bisogno di presentarsi nella scatola c'è il triangolo arancione, e non sono sicuro se ho bisogno di CSS o qualcos'altro di sbarazzarsi dei due elementi a sinistra del triangolo.

C'è un modo per farlo? Sto solo usando il tipo di ingresso date.

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

Answer 1

Utilizzare la pseudo-classe -webkit-inner-spin-button per disegnarlo specifiche per i browser basati su WebKit:

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

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

Se si vuole cambiare lo stile del dropdown arrow, usa la pseudo-classe -webkit-calendar-picker-indicator:

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

Per eliminare il pulsante chiaro, impostare l'ingresso richiesto:

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

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

Answer 2

Per rimuovere il pulsante chiaro, utilizza questo:

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

Come nota laterale, per fare questo in IE10 + (source), utilizzare questo:

::-ms-clear { } 

Si noti che questo funziona su <input type="text" />, poiché IE ora inserisce anche un pulsante di cancellazione.

Per applicare il resto del controllo della data nei browser WebKit, suggerirei di dare un'occhiata a this link. Per riassumere, si può giocare con le seguenti classi pseudo:

::-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 { } 

Vorrei inoltre consiglia di utilizzare il seguente al fine di disattivare gli stili di default del browser; Ho trovato che questo è particolarmente utile quando si lavora con i browser mobile:

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