0

我有一些看起来像这样的标记：

<div class="button">
   <span class="image"></span>
   <input type="submit" value="Test button">
</div>

CSS：

.button{
  background: url('http://img33.imageshack.us/img33/4108/leftd.png');
  width: 10px;
  display: inline-block;
  height: 15px;
}

.image{
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  background: url('http://img339.imageshack.us/img339/3112/arrow090.png');
  margin-left: 13px;
}

.button input{
  background: url('http://img853.imageshack.us/img853/7212/righthw.png');
  border: 0;
  display: block;
  font: 11px sans-serif;
  margin-left: 10px;
  padding-left: 23px;
  padding-right: 10px;
  color: #FFFFFF;
  width: auto;
  height: 15px;
}

提交按钮的代码由后端生成，我无法更改，但spans和divs是可编辑的，因为它们是模板的一部分。我用简单的图形做了一个简单的例子来更好地展示这个问题：http: //jsfiddle.net/UBS3z/

div 包含滑动门的左侧部分，大约 10 px 宽。span 包含一个要放置在文本左侧的图标。最后我们有提交按钮本身。

问题是，虽然在视觉上看起来不错，但当用户单击左侧滑动门或图像结束的区域时，该按钮不会记录任何单击。这非常糟糕，因为很大一部分按钮无法点击！这通过单击按钮来演示。如果单击已注册，该脚本将记录到控制台。

反正有没有使用CSS使这些区域可点击？我认为这可能可以使用 Javascript 来解决，但我更喜欢 CSS 解决方案。

4

2 回答 2

1

请参阅小提琴的代码和演示

小提琴：http: //jsfiddle.net/UBS3z/6/

演示：http: //jsfiddle.net/UBS3z/6/embedded/result/

是的，您是正确的，可以使用 css 仅查看满足您要求的演示。

于 2012-04-13T12:17:15.763 回答
0

我最终使用了 javascript 解决方案。虽然 Dinesh 的解决方案也可以，但背景图像非常复杂，所以我需要使用图像而不是背景颜色。这是问题的根本原因。

本质上，我只是编写了一个简单的脚本来连接到buttondiv 并在提交表单上进行任何点击。

于 2012-04-15T23:47:08.690 回答