Como consigo fazer um select com paletas de cores dentro, preciso fazer a seleção de determinadas cores, porém não por nome e sim por paletas que identificarão cada cor, veja um exemplo
Alguém conhece como, um tutorial ou por onde começar?
Valeu!
Como consigo fazer um select com paletas de cores dentro, preciso fazer a seleção de determinadas cores, porém não por nome e sim por paletas que identificarão cada cor, veja um exemplo
Alguém conhece como, um tutorial ou por onde começar?
Valeu!
Você pode fazer desta forma, mas é impossível você retirar a opção de outro.
<input type="color" id="cores" name="ArcoIris" list="arcoIris" value="#FF0000">
<datalist id="arcoIris">
<option value="#FF0000">Vermelho</option>
<option value="#FFA500">Laranja</option>
<option value="#FFFF00">Amarelo</option>
<option value="#008000">Verde</option>
<option value="#0000FF">Azul</option>
<option value="#4B0082">Indigo</option>
<option value="#EE82EE">Violeta</option>
</datalist>
Desenvolvi uma "solução" caseira claro que precisa melhorar mas vê se ajuda.
var cores = document.querySelectorAll("label[for^='cor']");
for(i = 0; i < cores.length; i++)
{
cores[i].addEventListener("click", function(){
document.querySelector("input[name='seleciona-cor']").checked = false;
});
}
.cores{
position: relative;
width: 100px;
}
.cores input[name="seleciona-cor"]{
display: none;
}
.cores label[for="seleciona-cor"]{
background-color: #ddd;
box-sizing: border-box;
position: absolute;
left: calc(100% - 20px);
height: 20px;
width: 20px;
}
.cores label[for="seleciona-cor"]::after{
display: block;
content: "\1a06";
font-size: 17px;
padding-left: 3px;
margin-top: -1px;
position: relative;
}
.cores label[for="seleciona-cor"]:checked::after{
content: "\1a08";
}
.cores input[name="seleciona-cor"]:checked ~ .cor label{
display: block;
}
input[name="cor"]{
display: none;
}
input[name="cor"]:checked + label::after{
content: "\2713";
color: #fff;
padding: 0px 5px;
}
input[name="cor"]:checked + label{
display: block;
}
label[for^="cor"]{
display: none;
height: 20px;
width: calc(100% - 20px);
}
<div class="cores">
<label for="seleciona-cor"></label>
<input id="seleciona-cor" type="checkbox" name="seleciona-cor" />
<div class="cor">
<input id="cor1" type="radio" name="cor" value="blue" checked />
<label for="cor1" style="background-color: blue"></label>
</div>
<div class="cor">
<input id="cor2" type="radio" name="cor" value="red" />
<label for="cor2" style="background-color: red"></label>
</div>
<div class="cor">
<input id="cor3" type="radio" name="cor" value="green" />
<label for="cor3" style="background-color: green"></label>
</div>
</div>
Bem eu pensei em duas possibilidades:
1 - Você usa imagens no select com as cores que você quer (ou background-color
):
<select>
<option style="background-image:url(vermelho.png);">vermelho</option>
<option style="background-image:url(amarelo.png);">amarelo</option>
<option style="background-image:url(azul.png);">azul</option>
</select>
2 - Use o elemento input type color
<!--elemento html5 color, verifique quais navegadores compativeis-->
<form>
<input type="color" name="favcolor">
</form>
O input type color vai abrir uma paleta para selecionar a cor desejada
Tutorial de Referência:
http://www.escolaw3.com/tutoriais/html/input-types#color