Изменить размер изображения в текстовом поле

Question

Я реализовал один простой код, который находится вокруг interwebz. Я разместил изображение внутри текстового поля (type="text"), но оно касается границы пустого поля. Есть ли способ, которым я могу перемещать изображение немного вправо, чтобы не касаться границы? Я боролся, но не мог найти способ.

Мой CSS код:

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

Вызов процедуры:

<input type="text" id="url" name="web" name="ws" class="tbl1" placeholder="http://example.com/" maxlength="140" /> 

Answer 1

в фотошопе, просто отредактировать изображение так Theres белое пространство слева от него. Легкая прокладка.

Но его, вероятно, лучше всего использовать background-position:15px;

Answer 2

Да. есть способ, которым вы можете перемещать изображение немного вправо, чтобы не касаться границы. Пожалуйста, попробуйте следовать.

.tbl1 { 
    background-image:url(images/v.png) no-repeat left; 
    background-position:8px; 
    padding-left:28px; 
}