How to create a cool color input?

Question

I was creating a form where the person would have the option to choose a color, as I didn’t want the person to write the color or because I thought it was cool to put an input of type color

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

But I do not know how I can modify it, It is kind of boring to manipulate, I do not know if it is possible to leave it round or put a background url in it, I would like to know how to mess with it.

Using jQuery is also an option.

Answer 1

How to use jQuery is an option, you can do something more or less like this:

$('#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>

Basically, the idea is to create a <label> customized for the <input>, which will remain. Thus, whenever the label is clicked, the default action of input - even if hidden - will be executed, and we can capture the color selected by the user using jQuery to then apply as background-color in the label.

Answer 2

Only CSS makes it cool too.

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