Jscolor 颜色选择器自定义（值名称更改）答案

【问题标题】：Jscolor Color Picker Customization (Value name change)Jscolor 颜色选择器自定义（值名称更改）
【发布时间】：2021-04-13 21:27:26
【问题描述】：

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

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

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

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

【问题讨论】：

标签： html css styles color-picker jscolor

【解决方案1】：

我希望这是您所期望的。我使用了一些 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>

【讨论】：