Select with color palettes

Asked

Viewed 3,438 times

3

As I can 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

repare que tem select normais de texto e um select de cores

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

Thanks!

html css

  • Dude.. There’s a library called "Jscolor"... I’ll leave the reference here... So you can do this right from a textbox, it’s very easy: http://jscolor.com/examples/

  • opa thanks, still not fit me, I want something but simple and I think it is possible only with css without use of library or javascript, in my case I need to define only a 5 colors at most.

3 answers

3

You can do this way, but it is impossible for you to withdraw 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>

  • Boy, that’s just what I needed, too bad the "other" option can’t be taken >(

  • @Patrique Unfortunately she is put there by the Navigator himself.

2


I developed a homemade "solution" of course that needs to improve 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: "\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>

  • 1

    Carai mano, well thought kkkkk, like, gave me to have other ideas on top of yours, I managed to have a basic logic of where to start, cool, like, thanks a lot for the help, will help me a lot.

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 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:
http://www.escolaw3.com/html/input-types#color

  • The first case did not work, the second appear all possible colors, for me do not give because I want to limit the colors, anyway I appreciate the attention and I’m still waiting for some suggestion for my case, thanks.

  • I understand. I researched the second case and couldn’t find a way to limit the colors. But in the first case, what went wrong? just didn’t work? or didn’t work...

  • Hi paulo, it will be an option to choose the layout, but I will limit to 5 colors, so I need to specify only 5 colors and not give the option to other;

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.