Question

如果您需要查看，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;


}

Answer 2

你也可以使用box-shadow： DEMO outset - DEMO inset

input:focus {
    box-shadow: -7px 0 0 0 green;
}

甚至

input:focus {
    box-shadow: inset 7px 0 0 0 green;
}

这将添加到此处已有的任何边框，只要输入具有焦点，它就会保留。 ouset box-shadow可能会将轮廓渲染器从浏览器更改为浏览器，插入不应该插入并且插入将悬停背景（如果有）。

假输入文本字段 - 当焦点以及如何从左侧推动图标时

2 个答案: