Input span not showing as a link - html

Question

The search glass icon in the orange input at the top of my page here isn't displaying as a link, so when hovered over the pointer doesn't show.. Any ideas why it might be?
Here's the CSS:
.searchGlass {
background-image: url(/images/searchicon.png);
background-position: left 1px;
background-color: rgba(0, 0, 0, 0);
display: block;
height: 18px;
position: relative;
top: -24px;
width: 15px;
background-repeat: no-repeat;
left: 7px;
}
.hideText {
text-indent: 125%;
white-space: nowrap;
overflow: hidden;
}
.submit {
margin: 1em 0 0 0;
width: 30px;
height: 30px;
text-transform:uppercase;
font-size:15px;
padding: 6px 13px;
cursor:pointer;
border-radius: 20px;
}
And html:
<div class="left"><input type="submit" class="submit hideText" value=""/><span class="searchGlass hideText">Go</span></div>
Many thanks.

Answer 1

Try from here:
<div class="left">
<button class="submit"><span class="searchGlass hideText">Go</span></button>
</div>
and CSS:
.searchGlass {
background-color: transparent;
background-image: url("/images/searchicon.png");
background-position: left 1px;
background-repeat: no-repeat;
display: block;
height: 18px;
position: relative;
width: 15px;
}

Answer 2

You can always submit by javascript:
<span class="searchGlass hideText">Go</span>

Answer 3

the default display for span is inline, you have to change it to block then float it where you want, then you will be able to but width and height
try this in CSS
.hideText {
text-indent: 125%;
white-space: nowrap;
overflow: hidden;
width:50px; /* 50px is just assumed value, put yours */
height:50px;
display:block
float:left;
}