rojo - Webkit CSS para controlar el cuadro alrededor del color en una entrada[type=color]?

input type color css

Question

¿Hay un estilo CSS específico de Webkit que me permita controlar el color / tamaño / estilo de la caja alrededor del color en una input[type=color] ? Estoy configurando el color y el color de fondo de la entrada para que se vea bien con un polifil de compatibilidad cruzada que estoy usando para Chrome y Firefox anteriores. Pero ahora que Chrome tiene un selector de color, hay una caja alrededor del color que deja un cuadro gris de 1px flotando en el medio de la entrada cuando el color y el color de fondo de la entrada se configuran en el mismo color. ¿Hay algún CSS para deshacerse de él, ya sea estableciendo el ancho de ese cuadro en 0, cambiando el estilo a none , o, en el peor, configurando el color al mismo color y color de fondo?

En esta imagen, estoy hablando de la caja gris dentro del blanco y fuera del verde:

He encontrado una solución alternativa, que es establecer un relleno lo suficientemente alto como para que la caja (el borde gris y el contenido verde) quede aplastada al tamaño 0. Pero eso es realmente raro, y no se ve muy bien en Firefox.

Answer 1

Así es como lo hice recientemente para un proyecto de arte. Soy un novato, así que avíseme si hice esto horriblemente mal.

input[type=color]{
 width: 40px;
 height: 40px;
 border: none;
 border-radius: 40px;
 background: none;
}
input[type="color"]::-webkit-color-swatch-wrapper {
 padding: 0;
}
input[type="color"]::-webkit-color-swatch {
 border: solid 1px #000; /*change color of the swatch border here*/
 border-radius: 40px;
}

<input type="color" value="#C899F5">

Answer 2

Desafortunadamente, las entradas de color son bastante delicadas. Los diferentes navegadores los tratan de manera diferente. Por ejemplo, Chrome dimensionará la entrada en función del width / height + border-width . Firefox, por otro lado, usará el máximo de width / height y border-width . Esto hace que el espaciado equitativo sea bastante difícil, con <input type=color> por sí mismo.

Sin embargo, lo que podemos hacer es eliminar todo, excepto el color seleccionado, y arrojar un envoltorio alrededor del mismo que sea capaz de manejar de manera más predecible el espacio alrededor de la entrada.

label.color-picker {
  width: 150px; /* Width of color picker */
  border: 1px solid #ccc; /* Outer border */
  border-radius: 3px; /* Border radius of outer border */
  padding: 5px; /* Space between outer border and color picker */
  background: #fff; /* Color between outer border and color picker */

  display: block; /* Contain color picker within label */
}

label.color-picker > span {
  border: 1px solid #ccc; /* Border around color in color picker */

  display: block; /* Contain color picker within span */
}

label.color-picker > span > input[type=color] {
  height: 10px; /* Height of color picker */

  display: block; /* Avoids space above/below color picker */
  width: 100%; /* Fill available horizontal space */
  border: none; /* Remove browser''s border */
  padding: 0px; /* Remove space around color picker in Chrome */
}

/* Chrome styles */
label.color-picker > span > input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0; /* Remove browser''s padding around color picker */
}
label.color-picker > span > input[type=color]::-webkit-color-swatch {
  border: none; /* Remove browser''s border around color in color picker */
}

/* Firefox styles */
label.color-picker > span > input[type=color]::-moz-color-swatch {
  border: none; /* Remove browser''s border around color in color picker */
}
label.color-picker > span > input[type=color]::-moz-focus-inner {
  border: none; /* Remove browser''s padding around color in color picker */
  padding: 0; /* Remove browser''s padding around color in color picker */
}

<label class="color-picker">
    <span>
        <input type=color value="#ff00ff">
    </span>
</label>

Answer 3

Estoy usando una solución simple, pero no tan elegante, supongo. Puede envolver la entrada con un div y hacer que la entrada sea más grande que el contenedor, después de eso puede darle forma al contenedor como lo desee. También puede usar una etiqueta con un atributo for para crear un botón en el que se pueda hacer clic con texto.

He hecho un ejemplo:

.input-color-container {
  position: relative;
  overflow: hidden;
  width: 40px;
  height: 40px;
  border: solid 2px #ddd;
  border-radius: 40px;
}

.input-color {
  position: absolute;
  right: -8px;
  top: -8px;
  width: 56px;
  height: 56px;
  border: none;
}

.input-color-label {
  cursor: pointer;
  text-decoration: underline;
  color: #3498db;
}

<div class="input-color-container">
  <input id="input-color" value="#ed6868" class="input-color" type="color">
</div>
<label class="input-color-label" for="input-color">
  I am a clickable label, try me
</label>

Answer 4

Mi método:

<div class="user__colors">
    <label><input type="color"/></label>
</div>

input {
    background-color: transparent;
    border: none;
    position: relative;
    width: 80px;
    height: 12px;
    &:after {
        position: absolute;
        content: '''';
        display: block;
        width: 100%;
        height: 100%;
        background: url(../img/color-palette.jpg) repeat-y 0 0;
        background-size: contain;
        top: 0;
        border-radius: 3px;
    }
}

Y se ve así: http://prntscr.com/gloozc

Pero si presiona Ctl + F5, verá la entrada original por un momento.

Answer 5

Muy simplemente, todavía deja un pequeño borde en el juego web.

input[type=color]{
  max-width: 20px;
  max-height: 19px;
  border: none;
  padding: unset;
}

<input type="color">

Answer 6

WebKit tiene selectores de CSS especiales que puede usar para personalizar los controles de formulario, pero no son oficiales.
Una actualización de WebKit en el futuro probablemente lo rompa.

Por favor, no lo use para producción !!

Pero siéntase libre de jugar con él para proyectos personales :)

Método 1

Utiliza selectores específicos de webkit para ocultar en su mayoría la parte no coloreada de la entrada.

input[type="color"] {
 -webkit-appearance: none;
 border: none;
 width: 32px;
 height: 32px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
 padding: 0;
}
input[type="color"]::-webkit-color-swatch {
 border: none;
}

<input type=color value="#ff0000">

Método 2

Oculta la entrada de color ( opacity:0 ) y usa JavaScript para establecer el fondo de la envoltura en el valor de la entrada.

var color_picker = document.getElementById("color-picker");
var color_picker_wrapper = document.getElementById("color-picker-wrapper");
color_picker.onchange = function() {
 color_picker_wrapper.style.backgroundColor = color_picker.value;    
}
color_picker_wrapper.style.backgroundColor = color_picker.value;

input[type="color"] {
 opacity: 0;
 display: block;
 width: 32px;
 height: 32px;
 border: none;
}
#color-picker-wrapper {
 float: left;
}

<div id="color-picker-wrapper">
 <input type="color" value="#ff0000" id="color-picker">
</div>

Answer 7

una buena solución es:

1. Envuelva su selector de color en una etiqueta. 2. Establezca la visibilidad del selector de color en falso. 3. enlaza el color de fondo de la etiqueta con el valor del selector de color.

ahora, tiene una etiqueta fácil de peinar que, al hacer clic, abre su selector de color:

JSFiddle

<label id="test_wrapper"><input id="inp" type="color"></label>