-3

Estava criando um form onde a pessoa teria a opção de escolher uma cor, como eu não queria que a pessoa escrevesse a cor ou porque eu achava bacana decidi colocar um input do tipo color

<input type="color" name="cor" id="cor" class="cor">

Mas eu não sei como posso modificar ele, É meio chato de manipular, não sei se é possível deixar ele redondo ou colocar um background url nele, gostaria de saber como mexer com ele.

Usar jQuery também é opção.

4
  • Já tentou fazer o que deseja ?
    – NoobSaibot
    Commented 13/06/2018 às 21:10
  • Já tentei fazer um círculo tentando colocar border-radios 100% mas n fica bacana. Commented 13/06/2018 às 21:14
  • Procure por paleta de cores HTML. Commented 13/06/2018 às 21:18
  • Veja: jscolor.com tem um exemplo usando botão
    – NoobSaibot
    Commented 13/06/2018 às 21:20

2 Respostas 2

2

Como usar jQuery é uma opção, você pode fazer algo mais ou menos assim:

$('#color-input').on('change', function () {
  $(this)
    .next('#pseudo-color-input')
    .css('background-color', $(this).val());
});
/*Esconder o input padrão. */
#color-input {
  position: absolute;
  opacity: 0;
}

#pseudo-color-input {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: solid 1px #000;
  border-radius: 100px;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="color" id="color-input" />
<label for="color-input" id="pseudo-color-input"></label>

Basicamente, a ideia é criar um <label> personalizado para o <input>, que ficará. Desse modo, sempre que o label for clicado, a ação padrão do input — mesmo que escondido — será executada, e poderemos capturar a cor selecionada pelo usuário usando jQuery para então aplicar como background-color no label.

2

Só com CSS fica legal também.

#cor {
      height: 35px;
      border: none;
      padding: 0;
      background-color: #fff;
      cursor: pointer;
}
#cor:focus{
      box-shadow: 0 0 0 0;
      border: 0 none;
      outline: 0;
}
<label for="cor">Escolha tua cor
<input type="color" name="cor" id="cor" class="cor" value="#ff0000">

2
  • 1
    Não sabia que isso era possível! Achei muito interessante. :) Commented 13/06/2018 às 22:02
  • Valeu man, sua resposta tbm ficou muito interessante.
    – LeAndrade
    Commented 13/06/2018 às 22:32

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .