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/