Jscolor 颜色选择器自定义值名称更改

问题描述

我正在使用 Jscolor 选择器来选择我的画布颜色，它对我来说非常好，但我需要给它一个更好的样式。 目前看起来像这样

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

我想更改值名称，即“#FFFFFF”并将其命名为“Canvas”，使其看起来像一个用于更改画布颜色的按钮，使其看起来像这样

我尝试了 documnetation，但没有找到有关自定义样式的线索，有什么办法可以解决这个问题吗？

解决方法

我希望这就是您所期望的。我使用了一些 CSS 属性来达到预期的效果。

// 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>