0

我对 jQuery colorPicker 插件触发框的 CSS 有一个小问题。它使用背景图像。当您单击颜色触发框并选择任何颜色时，它会将该颜色显示为触发框的背景。但是背景颜色似乎是开箱即用的，这使它看起来像相同颜色的边框。

背景图像大小为 22x22px，我可以通过将框的高度和宽度定义为小于 22px 来克服这个问题，但这也隐藏了图像的一部分，我不希望这样做。我想保留图像的原始大小（即 22 像素）。

这是 jsfiddle 链接，因为它是一个插件并且有很多额外的代码，所以我不在这里粘贴它。

http://jsfiddle.net/HaFDF/1/

在这里您可以看到问题：

在此处输入图像描述

4

2 回答 2

3

我刚刚玩过 jsFiddle，看起来边框是图像的半透明部分。解决这个问题并不难 - 您只需按照您所说的方式剪切图像（我剪切到 20px 以删除所有 4 个边框），然后使用 CSS 重新应用边框。

我在这里用#777 边框模拟了这个：http: //jsfiddle.net/HaFDF/3/

于 2012-07-30T07:25:02.733 回答
1

那只是因为样式是为创建的。该插件使用居中的背景图像（垂直和水平）。你可以做的是让你的选择器更小来隐藏这个细边框（使用 20*20 而不是 22*22），并放置你自己的边框。

如果您不想要这种颜色，请将此 css 用于miniColors-trigger：

.miniColors-trigger {
    height: 20px; //reduced from 22 to 20
    width: 20px; //reduced from 22 to 20
    border: 1px solid #a0a0a0; //put whatever you want
    background: url('http://labs.abeautifulsite.net/jquery-miniColors/images/trigger.png') center no-repeat;
    vertical-align: middle;
    margin: 0 .25em;
    display: inline-block;
    outline: none;
}

Jsfiddle 在这里更新

于 2012-07-30T07:16:58.887 回答