Disabilita colorpicker per <input type = "color"> in Google Chrome

In Google Chrome, <input type="color"> crea un input con una grande barra di colore al suo interno e, per impostazione predefinita, apre un colorpicker (sembra dipendente dal sistema operativo, il mio ha un Skin Windows). Io sto usando un colorpicker personalizzato a livello mondiale che si aggancia in type="color" che assomiglia a questo nella maggior parte dei browser:Disabilita colorpicker per <input type = "color"> in Google Chrome

text input with colored borders

Ma in Chrome sembra che questo:

solid colored bar with padding and a colored border

Se hai non l'ho mai visto prima, un simile aspetto è simile a questo (Windows 7 64 bit Google Chrome versione 22.0.1229.79 m):

enter image description here

Il colorpicker personalizzato sovrascrive quello predefinito, ma il problema è il modo in cui viene visualizzato in Chrome. Un altro problema è che non riesco a cancellare il valore (ho provato js), il valore predefinito è sempre #000000 e non può essere impostato su uno vuoto.

Può essere o non essere vero che se non voglio questo comportamento non dovrei usare type="color", ma a volte trovo l'interfaccia utente di Chrome un po 'troppo aggressiva. Cambiare tutto l'input type s non è qualcosa che non vedo l'ora, e non sono sicuro di cos'altro l'app possa fare con loro in modo che potrei finire per rompere qualcos'altro. Ho avuto problemi simili con i raccoglitori di date.

C'è un modo per modificare questo comportamento in Chrome in modo che possa avere un normale campo di testo? JavaScript/jQuery è un'opzione, ma se può essere fatto con le regole CSS -webkit in qualche modo sarebbe fantastico.

fonte

2012-10-03 Wesley Murch

mai saputo che ci sia qualcosa come 'type = "color"': D Edit: btw ho appena provato, ma non sono in grado di farlo funzionare, quale versione stai usando? –

Google Chrome versione 22.0.1229.79 m: http://jsfiddle.net/sfBK8/ –

Immagino che non ci sia modo di trattare questo come una casella di testo a meno che e fino a quando il browser dell'utente non è vecchio come il mio (ma come sviluppatore I non aggiornare alla più recente) .. –

Non dovrebbe usare type = colore in questo caso. Secondo lo standard, l'input [type = color] non può avere un valore vuoto.

If the value of the element is a valid simple color, then set it to the value of the element converted to ASCII lowercase; otherwise, set it to the string "#000000".

fonte

2012-10-07 01:08:28

Colpa mia per non aver fatto ricerche, grazie per i chiarimenti! –

Qui, ho archiviato un bug (richiesta di funzionalità) per lo standard, citando questa domanda https://www.w3.org/Bugs/Public/show_bug.cgi?id=21996 – naktinis

Per i problemi di visualizzazione, provare ignorando gli stili Agente utente predefinito: http://jsfiddle.net/ngBpA/

input[type="color"] { 
    -webkit-appearance: textfield; 
} 

input[type="color"]::-webkit-color-swatch-wrapper { 
    display: none; 
} 

input[type="color"]::-webkit-color-swatch { 
    display: none; 
}

Sto assumendo il plugin ridimensiona automaticamente la casella.

User Agent di stile: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

fonte

2012-10-03 04:31:11

Sapevo che ci doveva essere qualcosa con le regole di '-webkit', lasciami fare un tentativo e vedere come funziona, grazie per le informazioni. Il problema principale non è essere in grado di cancellare il valore, ma questo potrebbe risolvere parte della bruttezza. –

Ciò ha aiutato l'aspetto del display, ma per qualche ragione ':: - webkit-color-swatch' non era necessario e in qualche modo reso gli input del colorpicker del plugin molto ampi (che sono semplicemente' type = "text" ', strano). C'è ancora un sacco di imbottiture extra che non riesco a rimuovere ma sembra migliore. –

Disabilita colorpicker per <input type = "color"> in Google Chrome

risposta

Problemi correlati