我正在使用 Jscolor 选择器来选择 Canvas 颜色,它对我来说工作得很好,但我需要给它一个更好的样式。 目前看起来像这样
<p><input class="neu" id="canvasColor"value="#ffffff" data-jscolor="" > Canvas </p>
我想更改值名称,即“#FFFFFF”并将其命名为“Canvas”,以便它看起来像一个用于更改 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>
关于html - Jscolor拾色器定制(值名称更改),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65624478/