Search code examples
htmlcssstylescolor-pickerjscolor

Jscolor Color Picker Customization (Value name change)

I am using Jscolor picker for choosing my canvas colour and it is working totally fine for me, but I need to give it a better styling. It currently looks like this Canvas color

<p><input class="neu" id="canvasColor"value="#ffffff" data-jscolor="" > Canvas </p>

I want to change the value name i.e "#FFFFFF" and name it to "Canvas" so that it looks like a button for changing canvas color so that it look like this enter image description here

I tried the documnetation and I found no clues about custom styling, Is there any way to fix this?

Solution

  • I hope this is what you are expecting. I have used some CSS property to achieve the expected result.

    // let's define custom preset
jscolor.presets.myPreset = {
  format: 'hex',
  width: 201,
  height: 81,
  backgroundColor: '#333',
  palette: '#fff #000 #808080 #996e36 #f55525 #ffe438 #88dd20 #22e0cd #269aff #bb1cd4',
}

// logs the color value
let getValue = () => {
  let value = ele.getAttribute('data-current-color');
  console.log(value);
}

let ele = document.querySelector('.input');
ele.addEventListener('change', getValue);
    .input {
  width: 0px;
  padding: 0px !important;
  height: 20px;
  border: none;
  outline: none;
}

.input:focus {
  outline: none;
}

.picker {
  display: flex;
  width: 110px;
  border: 2px solid grey;
}

.picker div {
  width: 100%;
  text-align: center;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.4.4/jscolor.js"></script>

<div class="picker">
  <input class="input" data-jscolor="{preset:'myPreset'}" />
  <div> Canvas </div>
</div>