Select with color palettes

Navigation
3

How do I make a select with color palettes inside, I need to select certain colors, but not by name, but by palettes that will identify each color, see an example

Does anyone know how, a tutorial or where to start?

Thanks!

    
asked by anonymous 26.03.2017 / 16:50

3 answers

2

I've developed a "home-made" solution that needs improving, but see if it helps. 

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: "a06";
  font-size: 17px;
  padding-left: 3px;
  margin-top: -1px;
  position: relative;
}

.cores label[for="seleciona-cor"]:checked::after{
  content: "a08";
}

.cores input[name="seleciona-cor"]:checked ~ .cor label{
  display: block;
}

input[name="cor"]{
  display: none;
}

input[name="cor"]:checked + label::after{
  content: "13";
  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>
    
29.03.2017 / 15:14
2

You can do this, but you can not remove the option from another. 

<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>
    
28.03.2017 / 15:46
1

Well I thought of two possibilities:
1 - You use images in select with the colors you want (or 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 the input type color 

 <!--elemento html5 color, verifique quais navegadores compativeis-->
  <form> 
   <input type="color" name="favcolor">
 </form>

The input type color will open a palette to select the desired color

Reference Tutorial:
link

    
26.03.2017 / 17:35
How to insert a breakpoint in Javascript by code How to generate OR comparisons dynamically with LINQ?