Option to not style the input element about coloris HOT 8 CLOSED

The color input fields shouldn't be styled by the color picker at all. But if you are talking about the input field inside the picker dialog, that's the intended behavior, you can of course customize the style with CSS.

from coloris.

@glewe can you post a screenshot of what you mean by "out of place" ?

from coloris.

Here is a normal input field (Bootstrap style)

As soon as I link coloris to it it changes to this:

Is there any way to leave the original input field untouched?

from coloris.

The easiest way is to use a custom selector (set the el option to a class for example ) and set the wrap option to false. But the little color preview will not render.

Coloris({
  el: '.myclass',
  wrap: false
});

from coloris.

@glewe I just added Bootstrap 5 to a test page and the input field are rendered correctly without any issue. There is no overflowing preview thumbnail like in your screenshot. Could you maybe share a public page where I can see your issue in action?

from coloris.

Great. Thanks, that works. Code looks something like this now:

<div class="input-group mb-3">
  <span class="input-group-text"><i id="sample-txt_color" class="bi-square-fill" style="color: #F2EF3D"></i></span>
  <input id="txt_color" type="text" class="form-control" name="txt_color" value="#F2EF3D" maxlength="9">
</div>
<script>
  Coloris({
    el: "#txt_color",
    wrap: false,
    theme: "polaroid",
    themeMode: "dark",
    alpha: true,
    onChange: function (color) {
      $("#sample-txt_color").css("color", color);
    }
  });
</script>

from coloris.

Additional note:
I noticed that the onChange function does not work with multiple instances. I changed the code to this:

<div class="input-group mb-3">
  <span class="input-group-text"><i id="sample-txt_color" class="bi-square-fill" style="color: #608e20"></i></span>
  <input id="txt_color" type="text" class="form-control" name="txt_color" value="#608e20" maxlength="9" >
</div>
<script>
  Coloris({
    el: "#txt_color",
    wrap: false,
    theme: "polaroid",
    themeMode: "dark",
    alpha: true,
    format: "hex"
  });
  document.getElementById("txt_color").addEventListener("input", function() {
    document.getElementById("sample-txt_color").style.color = this.value;
  });
</script>

from coloris.

To support multiple instances, I'd recommend this method:

Coloris({
  el: "#txt_color",
  wrap: false,
  theme: "polaroid",
  themeMode: "dark",
  alpha: true,
  format: "hex",
  onChange: function (color, input) {
    var thumbnail = input.previousElementSibling; // This is the span.input-group-text

    if (thumbnail && thumbnail.firstElementChild) {
      thumbnail.firstElementChild.style.color = color;
    }
  }
});

from coloris.