Jscolor Color Picker自定义（值名称更改）

Question

我正在使用 Jscolor picker 选择我的 canvas 颜色，它对我来说工作得很好，但我需要给它一个更好的样式。目前看起来像这样

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

我想更改值名称，即“#FFFFFF”并将其命名为“Canvas”，使其看起来像一个用于更改 canvas 颜色的按钮，如下所示

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

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

Jscolor Color Picker自定义（值名称更改）

Jscolor Color Picker Customization (Value name change)

html

css

styles

color-picker

jscolor