Javascript 可从图像覆盖访问的输入

我有一个

输入

字段。
左侧的颜色区域（输入文本字段）从用作按钮的库中填充。

问题：是否可以将图像区域放在右侧（

.arrowDiv

），以便我可以单击其下方的

输入

文本字段？下面的含义

z-index

原因是我似乎无法改变库来检测来自

输入

文本字段以外的任何内容的点击

因为url的问题，我不能胡闹

css:

html:

是否可以将图像区域置于右侧（.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
});

---

不可能单击另一个元素后面的元素，但我在div中附加了一个小脚本，它将触发上解释的打开-关闭事件。令人失望的是，库中没有

isOpen（）

方法，所以我不得不存储自己的变量。我想我在这个玩具剧本中得到了你想要的东西。不过，您需要对代码进行一些调整，因为div隐藏了输入元素的值

---

右键单击div，然后单击铬合金中的inspect元素。首先检查图像是否存在。此外，您的小提琴将

arrowDiv

推到输入下方。我的问题是将这两个元素并排放置，并能够在图像中单击，这样我就可以实际单击

输入

元素我以为您想要输入下带有箭头的div，我想访问

输入

，如果将输入的

z-index

设置为大于

arrowDiv的
z-index
，则div将与输入重叠。那么你就不会再看到这个图像了。。您可以做的一件事是处理div的click事件，并使用Javascript以编程方式打开它。如果它没有功能，您不想
显示：none
箭头下拉列表吗？@Dracorat，但这样我就看不到图像了
.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;
}

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