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