Deshabilitar colorpicker para <input type = "color"> en Google Chrome

En Google Chrome, <input type="color"> crea una entrada con una gran barra de color dentro y de forma predeterminada, abre un colorpicker (parece que depende del sistema operativo, el mío tiene una Piel de Windows). Estoy usando un colorpicker personalizada a nivel mundial que se engancha en type="color" que se parece a esto en la mayoría de los navegadores:Deshabilitar colorpicker para <input type = "color"> en Google Chrome

text input with colored borders

Pero en Chrome se ve así:

solid colored bar with padding and a colored border

Si usted tiene Nunca lo había visto antes, un barebone se ve así (Windows 7 64bit Google Chrome Versión 22.0.1229.79 m):

enter image description here

El colorpicker personalizado anula el predeterminado, pero el problema es la forma en que se muestra en Chrome. Otro problema es que parece que no puedo borrar el valor (he intentado con js), el valor predeterminado es siempre #000000 y no se puede establecer en uno vacío.

Puede ser o no cierto que si no quiero este comportamiento no debería usar type="color", pero a veces encuentro que la UI de Chrome es un poco agresiva. Cambiar toda la entrada type s no es algo que espero, y no estoy seguro de qué más está haciendo la aplicación con ellos, así que podría terminar rompiendo algo más. He tenido problemas similares con los seleccionadores de fecha.

¿Hay alguna manera de cambiar este comportamiento en Chrome para que pueda tener un campo normal similar al texto? JavaScript/jQuery es una opción, pero si se puede hacer con las reglas de CSS -webkit de alguna manera eso sería genial.

Fuente

2012-10-03 Wesley Murch

nunca sabía que hay algo como 'type = "color"': D Editar: por cierto he intentado pero no soy capaz de conseguir que funcione, qué versión está usando? –

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

Supongo que no hay manera de que pueda tratar esto como un cuadro de texto a menos y hasta que el navegador del usuario sea viejo como el mío (Pero como desarrollador yo no actualices a la última) .. –

No use type = color en este caso. De acuerdo con el estándar, la entrada [tipo = color] no puede tener un valor vacío.

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".

Fuente

2012-10-07 01:08:28

Mi culpa por no investigar, ¡gracias por la aclaración! –

Aquí, archivé un error (solicitud de función) para el estándar, citando esta pregunta https://www.w3.org/Bugs/Public/show_bug.cgi?id=21996 – naktinis

Para los problemas de visualización, intente anular los estilos por defecto del Agente de Usuario: 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; 
}

Estoy asumiendo su plugin cambia automáticamente el tamaño de la caja.

agente de usuario de estilo: http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Fuente

2012-10-03 04:31:11

Sabía que tenía que haber algo con las reglas '-webkit', déjame probar esto y ver cómo funciona, gracias por la información. El principal problema es no poder borrar el valor, pero esto podría corregir algo de la fealdad. –

Eso ayudó con el aspecto de la pantalla, pero por alguna razón ':: - webkit-color-swatch' no era necesaria y de alguna manera las entradas de colorpicker de plugin eran realmente anchas (que son simplemente' type = "text" ', strange). Todavía hay un montón de relleno adicional que no puedo eliminar, pero se ve mejor. –

Deshabilitar colorpicker para <input type = "color"> en Google Chrome

Respuesta

Cuestiones relacionadas