How to create a nice color input? [closed]

-2

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

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

But I do not know how I can modify it, it's kind of annoying to manipulate, I do not know if it's possible to leave it round or put a background url on it, I'd like to know how to tinker with it.

Using jQuery is also an option.

    
asked by anonymous 13.06.2018 / 23:05

2 answers

2

Using jQuery is an option, you can do something 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><inputtype="color" id="color-input" />
<label for="color-input" id="pseudo-color-input"></label>

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

13.06.2018 / 23:21
2

Only CSS gets 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">
    
13.06.2018 / 23:35