Css - 带有图标框和半径的文本输入

Question

如何在css中实现此输入框？

这是我迄今为止所尝试过的。我无法将图标框放在右侧：

.inputs {
  text-align: center;
}
.usericonbox {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: #2af;
  float: right;
}
.inputs input {
  display: inline-block;
  width: 100%;
  text-align: center;
  border-radius: 6px;
  font-size: 1em;
  height: 40px;
  margin-bottom: 15px;
  box-shadow: 0px 0px 5px 0px rgba(120,120,120,0.5);
}

HTML

<div class="inputs">
<span class="usericonbox"></span>
<input type="text" placeholder="Username"></div>

Answer 1

使用绝对定位，在标记中输入后移动图标，并添加几个样式使其工作：

<div class="inputs">
    <input type="text" placeholder="Username" />
    <span class="usericonbox"></span>
</div>

.inputs {
    position: relative;
    text-align: center;
}
.usericonbox {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 50px;
    height: 42px;
    background-color: #2af;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}
.inputs input {
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 1em;
    height: 40px;
    margin-bottom: 15px;
    border-radius: 6px;
    border: 0px;
    box-shadow: 0px 0px 5px 0px rgba(120,120,120,0.5);
}

以下是它的工作演示：https://jsfiddle.net/2rqw4d68/