Question

I have got some markup that looks like this:

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

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

The code for the submit button is generated by the backend which I cannot change, but the spans and divs are editable as they are part of the template. I have made a simple example using simple graphics to show the issue better: http://jsfiddle.net/UBS3z/

The div holds the left part of the sliding door and is about 10 px wide. The span holds an icon to be placed to the left of the text. Finally we have the submit button itself.

The problem is that while visually, it looks fine, the button does not register any clicks when the user clicks on the left sliding door or the area where the image is over. This is extremely bad as a huge chunk of the button is unclickable! This is demonstrated by clicking on the button. The script will log to the console if a click has been registered.

Is there anyway to make those areas clickable using CSS? I think this might be possible to solve using Javascript, but I would prefer a CSS solution.

Answer 1

I ended up using a javascript solution. While Dinesh’s solution would work too, but background image is very complicated, so I need to use an image instead of a background color. This is the root cause of the issue.

Essentially, I just wrote a simple script to hook onto the button div and make any clicks on that submit the form.