html - Overlapping elements - Form in front, but cursor goes behind -


i have form input field. while input field comes in front, text cursor seems go behind. have tried various z-index combinations, don't help, object in front. how cursor in front? know i'm doing trivially wrong, i'm not able place it

code snippet:

.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>

the cursor isn't going behind. camouflaging color #7e7e7e

try giving color of

.searchbox{     background-color: yellow; } 

and hover cursor, see visible


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -

How to provide Authorization & Authentication using Asp.net, C#? -