在文本框中更改圖片邊距

我已經實現了一個簡單易用的代碼，它圍繞着interwebz。我在文本框（type="text"）字段中放置圖像，但它正在觸摸空框的邊框。有沒有一種方法可以將圖像向右移動一點以避免與邊框接觸？我一直在掙扎，但找不到方法。在文本框中更改圖片邊距

Image is touching my border!

我的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" />

來源

2013-08-31 sensation

在Photoshop

，只需編輯圖像，那裏有一個白色的空間，它的左側。易於填充。

但它可能是最好使用background-position:15px;

來源

2013-08-31 00:53:18 roasstbeef

在ps中添加5px，10px的空白空間，無論你想要的數量是多少 – roasstbeef

+1，但它是一個真正的黑客！ – tjons

感謝您的支持 – roasstbeef

是。有一種方法可以將圖像向右移動一點以避免與邊框接觸。請嘗試以下。

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

來源

2017-02-06 08:19:08

在文本框中更改圖片邊距

回答

相關問題