更改文本框中的图像边距

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

在Photoshop中的

，只需编辑图像，使其左侧有一个空白区域。轻松填充。

但最好使用background-position:15px;

Answer 2

是。有一种方法可以将图像向右移动一点，以避免与边界接触。 请尝试以下。

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