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
Post a Comment