css - 假输入文本字段 - 何时获得焦点以及如何将图标从左侧推开

Question

http://jsfiddle.net/g54p4/

HTML 和 CSS 在 jsfiddle 中以备不时之需。

    <div class="box-input">
    <input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
    </div>

    <div class="box-input">
    <input type="text" placeholder="Email Address" class="input-icon-email cly-pvxl" name="email">
    </div>

CSS

 .box-input{
      border-left: 7px solid transparent;
      cursor: pointer;
      display: block;
      vertical-align: middle;
      width: 100%;
    }
    .box-input:hover, 
    .box-input:focus{
        border-left: 7px solid green;
     }

    .box-input input{
        width: 100%;
        border: 0;
        padding-left: 80px;
    }

    .box-input input:focus,
    .box-input input:hover{
          outline: 1px solid #eee;

    }

    .input-icon-email{
      display: inline-block;
      position: relative;
      vertical-align: middle;
      height: 34px;
      width: 34px;
      background: url('http://mbsales.com/WebAssets/email_icon1.gif') left center no-repeat;
        padding-left: 30px;
    }

尝试伪造输入 div，使其显示左边框绿色，但意识到当通过输入选项卡转到下一个字段时，它不会显示左边框绿色。另一个问题是如果尝试在输入 css 中添加 border-left green，它会在焦点时显示，并且图像图标会跳动。还想用左边的填充将图标推开，但什么也没发生。

也许做错了。帮助表示赞赏。

Answer 1

你可以试试这个:

working DEMO

添加这个:

.box-input input{ border-left: 7px solid transparent;}

并将悬停样式返回给输入:

.box-input input:focus,
.box-input input:hover{
      outline: 1px solid #eee;
    border-left: 7px solid green;


}