2

我有一个使用 JSColor, color pickerinput的字段。 左侧的颜色区域（文本字段）从充当按钮的库中填充。
input
在此处输入图像描述

问题：是否可以在右侧（.arrowDiv）上设置图像区域，以便我可以单击其input下方的文本字段？下层含义z-index

原因是因为我似乎无法更改库以检测除input文本字段以外的任何点击

由于网址问题，我无法制作小提琴

CSS：

.input-container {
    position:relative; border:#999 1px solid; 
    height: 38px; width: 80px;
}
.arrowDiv{ 
    position:absolute; right:0; width:38px; height:38px; display:block; z-index:2;
    background: url("arrow.png") no-repeat scroll -335px 0 #F2F2F2;
}

.input-container input{
    float:left; margin:0; padding:0;
    width:75px; height:38px; 
    border:none;  background:transparent;   cursor:pointer;
}

html:

<div class="input-container">
    <input class="color">
    <div class="arrowDiv"></div>
</div>
4

2 回答 2

1

无法单击另一个元素后面的元素，但我在 div 上附加了一个小脚本，该脚本将触发演示页面上解释的打开关闭事件。令人失望的是图书馆没有isOpen()方法，所以我不得不存储自己的变量。我想我在这个玩具剧本中得到了你想要的东西。您需要对代码进行一些调整，因为 div 隐藏了输入元素的值。

http://jsfiddle.net/jv6b7/

于 2013-07-22T20:41:09.540 回答
1

是否可以将图像区域放在右侧（.arrowDiv），以便我可以单击其下方的输入文本字段？

当然肯定。

尝试设置top属性和left属性而不是right

.arrowDiv{ 
    position:absolute;
    left:0;
    top:39px;
    width:80px;
    height:38px;
    display:block;
     z-index:2;
    background: url("arrow.png") no-repeat scroll -335px 0 #F2F2F2;
}

检查小提琴

CSS将 div 大小设置为图标的大小

.input-container {
    position:relative;
    border:#999 1px solid; 
    height: 38px;
    width: 80px;
}
.arrowDiv{ 
    position:absolute;
    left:60px;
    top:10px;
    width:16px;
    height:16px;
    display:block;
    z-index:2;
    background: url(http://i577.photobucket.com/albums/ss218/charles2690/11.png) no-repeat scroll;
}

.input-container input{
    float:left;
    margin:0;
    padding:0;
    width:75px;
    height:38px; 
    border:none;
    background:transparent;
    cursor:pointer;
}

JS

$('.arrowDiv').click(function() {
       // code to open the color picker
});

小提琴

于 2013-07-22T20:09:48.273 回答