Question

我当前正在使用jscolor，但是当我在网页中显示选择器时，彩虹部分会在选择器的其余部分偏移。以下是我的网站上拾色器外观的链接：（https://ibb.co/9N8dHXs）。

我的网站上有一块大画布用于我的Three.js图形，我认为这可能与问题有关，但我不确定，甚至当我尝试将画布取走时，仍然有问题。

我尝试将颜色选择器放在html的所有部分中的不同容器中，但是无论我仍然得到什么偏移量。

我的html片段：

<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;
}

其他所有功能都可以正常工作，但是如何解决此图形问题？

Answer 1

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

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

Answer 2

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

pause()

jscolor拾色器偏移

2 个答案: