Question

考虑以下代码

<label>
   <input type="text" placeholder="cool placeholder"></input>
</label>

我想要做的是在占位符之前有一个图像。当有人开始输入时，我希望图像和占位符消失。

  # when nothing is on input

  label: [img] | placeholder

  # when something is on input

  label: something in input|

我可以使用占位符上的背景图片来执行此操作。

但问题是文本指示符|显示在图像前面。

有没有办法让文字指示符显示在背景图像之后，一旦占位符消失，它就会再次出现在输入的开头？

只有css的答案才是最好的 - 在这种情况下改变html的结构将会非常昂贵。

Answer 1

您可以使用:focus http://jsfiddle.net/qg0daxdb/

input {
    background: url(http://www.google.com/favicon.ico) center left no-repeat;
    background-size: 16px;
    text-indent: 20px;
}

input:focus {
    background: none;
    text-indent: 0;
}

Answer 2

暂不公开评论，抱歉。如上所述，如果需要消失使用焦点是最好的选择：输入时的有效和必需属性。：虽然早期版本的IE不支持有效。如果不需要文本字段并且图像必须继续模糊，则代码下方。 js参与此案，对不起。

<style type="text/css">
    .placeImg{text-indent:20;background:url(http://www.clker.com/cliparts/e/2/a/d/1206574733930851359Ryan_Taylor_Green_Tick.svg.thumb.png)no-repeat;background-size:15px;}
    .placeImg.noImg{text-indent:0;background:none;}

</style>

<label>
     <input onkeypress="tryMe(this)" onblur="tryMe(this)" class="placeImg" type="text" placeholder="cool placeholder" ></input>
  </label>

  <script type="text/javascript">

function tryMe(e){

    if(e.value != ''){
        e.className = e.className + ' noImg';
    }
    else
    {
        e.className = 'placeImg';
    };
}

  </script>

你如何构造像:: placeholder：之前的东西

2 个答案: