How do I make the <Span> above a button clickable (like a button)?
See this fiddle
I want the "eye" icon on the one hand to appear like it does now (above the button, so I don't think z-index will help), but on the other hand, I want the button to be clickable all over the surface, which is also indicates the eye area.
Also, is there a better way to position the eye? since one day I use a different text, then "Click me", I would have to set the absolute eye position accordingly. any way to define it better?
<form action="1.php" method="POST" target="_blank">
<input type="submit" class="button" value="Click Me"><span class="fa fa-eye fa-lg foo" "></span>
</form>
.foo{
color:red;
font-size:1.7em;
position: absolute;
height: 11px;
top: 18px;
left: 15px;
pointer-events: none;
}
.button {
display: inline-block;
zoom: 1;
line-height: normal;
white-space: nowrap;
vertical-align: baseline;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: inherit;
font-family: arial;
font-size: 17px;
padding: .5em .9em .5em 2em;
text-decoration: none;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, .2);
}
To make it available, you can add pointer-events: none
to an item. This essentially allows you to click the item.
Updated example
.foo {
pointer-events: none;
color: red;
/* Other styles.. */
}
Support for this property can be found here .
Another option is to wrap both elements in label
. Clicking on the label launches the item input
, thereby eliminating the problem.
Example here
<label>
<span class="fa fa-eye fa-lg foo"></span>
<input type="submit" class="button" value="Click Me"/>
</label>