您如何设置文本输入的样式，以便在不使用背景图像的情况下在左侧有一个图标？答案

【问题标题】：How do you style a text input so that there's an icon on the left without using background-image?您如何设置文本输入的样式，以便在不使用背景图像的情况下在左侧有一个图标？
【发布时间】：2016-09-22 10:52:01
【问题描述】：

我正在尝试创建一个类似于 Pearson 的 TestNav 登录中显示的用户名和密码输入的文本输入（忽略黄色框）。

为了使图标位于左侧，他们使用了 background-image 属性。我想知道是否可以在不使用任何图像的情况下达到相同的效果。 I've gotten pretty close，但是有两个问题。图标框右侧的边框是圆形的，如果单击该图标，它不会聚焦输入。我尝试让输入框背景透明并将图标放在它后面，但如果网站在密码管理器中，Chrome 会覆盖背景颜色。

这是我尝试的 CSS/HTML： HTML：

<div class="field">
  <input type="text">
  <div class="icon">
    <i class="fa fa-user"></i>
  </div>
</div>

CSS：

.field input {
    outline: none;
    border: 0px solid #fff;
    font-size: 14px;
    padding: 5px 5px 5px 44px;
    position: absolute;

    width: 260px;
    height: 40px;

    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 0px rgba(186,213,232,1);

    transition: border 0.5s ease-in-out 0s, box-shadow 0.3s ease-in-out 0s;
}

.field input:focus {
    border: 1px solid #2977FF;
    box-shadow: 0px 0px 10px 2px rgba(186,213,232,1);
}

.field .icon {
  display: flex;
    justify-content: center;
    align-items: center;


    height: 36px;
    width: 36px;
    padding: 0;
    border: 1px solid #eee;
    border-radius: 3px;
    margin: 1px 0px 0px 1px;
    position: absolute;
    background-color: #eee;
}

【问题讨论】：

标签： html css

【解决方案1】：

尝试将您的图标 div 更改为标签

<div class="field">
  <input type="text" id="this-input">
  <label class="icon" for="this-input">
    <i class="fa fa-user"></i>
  </label>
</div>

这样，当它被点击时，它会聚焦它引用的元素（for="this-input"）

固定边框半径。从

更改图标样式

border-radius: 3px;

到

border-radius: 3px 0 0 3px;

从左上角开始，左上角为 3px，右上角为 0，右下角为 0，左下角为 3px

【讨论】：

【解决方案2】：

您可以使用 use: input:before 并使用 fontawesome 等图标字体作为内容的样式。

例子：

<input type="text" id="this-input" class="icon-whatever" />

【讨论】：

【解决方案3】：

可以像您的情况一样使用border-radius来删除圆形，
边框右上角半径：0px;
边框右下角半径：0px;

您需要 Javascript 来聚焦输入标签。因为 .icon 类不是输入标记的一部分（输入标记是单独的，而 .icon 在您的代码中是单独的）。为此，请使用 focus() 函数

希望对你有帮助

function cool()
{
		document.getElementById("cool").focus();
}

.field input {
    outline: none;
    border: 0px solid #fff;
    font-size: 14px;
    padding: 5px 5px 5px 44px;
    position: absolute;

    width: 260px;
    height: 40px;

    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 0px rgba(186,213,232,1);

    transition: border 0.5s ease-in-out 0s, box-shadow 0.3s ease-in-out 0s;
}

.field input:focus {
    border: 1px solid #2977FF;
    box-shadow: 0px 0px 10px 2px rgba(186,213,232,1);
}

.field .icon {
  display: flex;
    justify-content: center;
    align-items: center;
    height: 36px;
    width: 36px;
    padding: 0;
    border: 1px solid #eee;
    border-radius: 3px;
	border-top-right-radius:0px;
	border-bottom-right-radius:0px;
    margin: 1px 0px 0px 1px;
    position: absolute;
    background-color: #eee;
}

<div class="field">
  <input type="text" id=cool>
  <div class="icon" onclick="cool()">
    <i class="fa fa-user"></i>
  </div>
</div>

【讨论】：