Having an issue with a form's input field where the text cursor appears behind the input. I've tried adjusting the Z-index but it doesn't seem to be working. How can I bring the cursor to the front? Must be missing something simple, but I just can't figure it out.
Relevant Code:
.searchBox {
background-color: #7e7e7e;
border: medium none;
color: #fff;
font-family: arial;
font-size: 12px;
font-style: italic;
font-weight: 600;
height: 24px;
padding-left: 10px;
position: absolute;
width: 38.7%;
z-index: 3000;
}
.searchIconBox {
background-color: #7e7e7e;
height: 24px;
margin-top: 0;
padding-left: 5px;
padding-top: 3px;
width: 5%;
}<div style="width:49%;">
<form style="width:94%;" class="pull-left">
<input type="text" class="searchBox" placeholder="Search"></input>
</form>
<div class="pull-right searchIconBox">
<asset:image src="search.png" />
</div>
</div>