Limit input type color only to black and white

Question

Limit input type color only to black and white

Navigation

#1 by (5 votes)
#2 by (1 votes)
#3 by (1 votes)

5

I'm making a script in which you can change color with input type="color"

What I want is that in the input instead of choosing the whole range of colors it gives, I can only choose between white or black.

Is that possible ?? Or will I have to do it with two radio buttons ??

<div class="col-lg-6">
    <div class="form-group">
        <label>Elegircolor</label>
             <input type="color" id="colorElegido" value="#000000" name="product_color" class="form-control">
        </div>
    </div>
</div>

javascript html

asked by Byron 10.10.2016 в 13:40

source

3 answers

5

You can use this code that would be a radiobutton but in the appearance of picker color:

Although the option "others" comes out ...

You can put an onChange event in the input and if it is different from the Black and White that notifies the user.

   <input type="color" id="some id" name="someName" list="rainbow" value="#000000">
<datalist id="rainbow">
    <option value="#000000">Negro</option>
    <option value="#FFFFFF">Blanco</option>

</datalist>

answered by 10.10.2016 в 13:44

1

Personally, I like the lois6b solution (no need to use JavaScript), but it has the problem of that does not work at all in Firefox and IE / Edge, and also allows you to choose invalid colors (even in Chrome by clicking on the "Other ..." button). So I'm going to put an alternative with JavaScript, maybe if you combine this solution with that of lois6b, you could get something interesting.

The idea would be to add a handler for the onchange event that, every time the field changes value, check if the new value is part of a list of valid colors; and if it is not, make the value of the field back to one by default.

Something like this:

// añadir un controlador del evento onChange
document.getElementById("colorElegido").addEventListener("change", function(e) {

  // lista de colores válidos
  var coloresValidos = ["#ffffff", "#000000"];

  // si el nuevo valor no es válido, entonces poner el valor por defecto
  if (coloresValidos.indexOf(e.target.value.toLowerCase()) < 0) {
    e.target.value = "#000000";
  }

}, false);

<div class="col-lg-6">
  <div class="form-group">
    <label>Elegircolor</label>
    <input type="color" id="colorElegido" value="#000000" name="product_color" class="form-control">
  </div>
</div>

answered by 10.10.2016 в 18:24

How to implement a conf file using Python Difference between the constructor and ngOnInit in Angular2

score 1 · Accepted Answer

Since it is a binary option (black / white), an alternative would be to use a single checkbox and a bit of CSS to show what you want, that is two colors as an option.

Then you only use the value of the checkbox to know what color the user has chosen: checked = black, unchecked = white

Salu2.

.select-color  {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
}

.select-color input[type=checkbox] {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  z-index:1;
  opacity: 0;
}

.select-color button {
  width: 100%;
  height: 100%;
  background: white;
}

.select-color input[type=checkbox]:checked + button {
  background: black;
}

Color: 
<div class="select-color">
    <input type="checkbox">
    <button></button>
</div>