1

私は、interwebz のいたるところにある簡単で使いやすいコードを 1 つ実装しました。テキストボックス ( 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" />
4

2 に答える 2

3

フォトショップで、画像を編集して、左側に空白ができるようにします。簡単なパディング。

しかし、おそらくそれを使用するのが最善ですbackground-position:15px;

于 2013-08-31T00:53:18.997 に答える