text inside input
<input type="text" placeholder="Your email here">
text inside input
<input type="text" placeholder="Your email here">
show icon in input field
background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;
add icon to input
<!-- If using Bootstrap -->
<!-- Icon can be put before or after input -->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">
<!-- Icon or Text here -->
</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
<span class="input-group-text" id="basic-addon1">
<!-- Icon or Text here -->
</span>
</div>
<!-- Pure Css & Html -->
<!-- src: https://stackoverflow.com/a/40261155 -->
<style type="text/css">
#input_container {
position:relative;
padding:0 0 0 20px;
margin:0 20px;
background:#ddd;
direction: rtl;
width: 200px;
}
#input {
height:20px;
margin:0;
padding-right: 30px;
width: 100%;
}
#input_img {
position:absolute;
bottom:2px;
right:5px;
width:24px;
height:24px;
}
</style>
<div id="input_container">
<input type="text" id="input" value>
<img src="https://cdn4.iconfinder.com/data/icons/36-slim-icons/87/calender.png" id="input_img">
</div>
Copyright © 2021 Codeinu
Forgot your account's password or having trouble logging into your Account? Don't worry, we'll help you to get back your account. Enter your email address and we'll send you a recovery link to reset your password. If you are experiencing problems resetting your password contact us