I've come across a simple yet widely used code online. I tried placing an image inside a textbox with the type of "text", but the image is touching the border of the empty box. Is there a way I can adjust the positioning of the image to the right to prevent it from touching the border? I've been struggling to find a solution.
Here is my CSS code:
.tbl1 {
background-image:url(images/v.png);
background-position:left;
background-repeat:no-repeat;
padding-left:20px;
}
input {
background: #fff;
display: block;
border: 2px solid rgba(0, 0, 0, .2);
padding: 8px;
font-size: 13px;
margin: 20px auto;
width: 600px;
font-family: "HelveticaNeue-Light", "HelveticaNeue", Helvetica, Arial, sans-serif;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
}
input.text:focus {
outline: none;
border-color: #09f;
color: #222;
}
Here is how I am implementing the code:
<input type="text" id="url" name="web" name="ws" class="tbl1" placeholder="http://example.com/" maxlength="140" />