jscolor 颜色选择器偏移答案

【问题标题】：jscolor Color Picker is offsetjscolor 颜色选择器偏移
【发布时间】：2019-06-14 04:48:35
【问题描述】：

我目前正在使用 jscolor，但是当我在我的网页中显示选择器时，它的彩虹部分在选择器的其余部分中发生了偏移。这是我网站上颜色选择器的链接：(https://ibb.co/9N8dHXs)。

我的网站上有一块大画布用于三个.js 图形，我认为这可能与问题有关，但我不确定，即使我试图把画布拿走我仍然有问题。

我已经尝试将颜色选择器放在 html 的所有部分、不同的容器中，但无论如何我仍然会得到这个偏移量。

我的 html 的 sn-p：

<body>
    <div id="container">
        <div class="sidebar" id="sidebar">
            <div class="controls" id="controls">
                <div>
                    <h4 class="sect-head">BACKGROUND</h4>
                    <div class="sect-child">
                        Sky Color
                        <input class="jscolor" onchange="setRendererColor(this.jscolor)" value="FFE4A6">
                    </div>
                </div>
            </div>
        </div>
     </div>
</body>

我的 jscolor css：

.jscolor {
    width: 60px; 
    height: 13px;
    border: white;
    font-family: "umma";
    font-size: 10px;
}

其他一切都按预期工作，但我该如何解决这个图形问题？

【问题讨论】：

你能分享网站本身吗？有很多东西可以修改那个元素，从 CSS 到某些特定的 js。

标签： javascript html css jscolor

【解决方案1】：

你必须将 jscolor 类的宽度设置为 100%，并将 sect-child 的宽度设置为 60 像素

.jscolor {
    width: 100%; 
    height: 13px;
    border: white;
    font-family: "umma";
    font-size: 10px;
}

【讨论】：

这不会改变颜色选择器（彩虹选择器部分所在的位置），而是导致按钮（图片中的浅绿色部分，并显示“8BFF70”）占用 100%页面的宽度。无论如何我可以操纵颜色选择器吗？
你能为这个jsfiddle创建一个codepen吗？这样我可以更好地帮助你！

【解决方案2】：

function setRendererColor(jscolor)
{
  document.body.style.backgroundColor = '#' + jscolor.value;
}

.jscolor {
    width: 100px; 
    height: 13px;
    border: white;
    font-family: "umma";
    font-size: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jscolor/2.0.4/jscolor.min.js"></script>
<body>
    <div id="container">
        <div class="sidebar" id="sidebar">
            <div class="controls" id="controls">
                <div>
                    <h4 class="sect-head">BACKGROUND</h4>
                    <div class="sect-child">
                        Sky Color
                        <input class="jscolor" onchange="setRendererColor(this)" value="FFE4A6">
                    </div>
                </div>
            </div>
        </div>
     </div>
</body>

【讨论】：