html - 更改文本框中的图像边距

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