顯示圖標旁邊的輸入字段

我試圖讓這個在label是直接在input場的頂部，我希望有一個圖標，顯示右下一個到所述input領域。顯示圖標旁邊的輸入字段

@import url("//fonts.googleapis.com/icon?family=Material+Icons"); 
 

 
input, 
 
label { 
 
    display: block; 
 
}

<div> 
 
    <label for="username">Username</label> 
 
    <input id="username" placeholder="Username" class=""> 
 
    <i class="material-icons">accessibility</i> 
 
</div>

我可以使用上述CSS獲得input以上label。但是，如何獲得輸入字段旁邊的icon？

JS Fiddle

來源

2017-05-03 MonkeyOnARock

你需要它只是輸入後場？ –

是的，所以圖標應該是輸入字段的*右邊*（不在下面，因爲它在jsfiddle中）。 – MonkeyOnARock

最簡單的改變就是從你的CSS規則中刪除_input_：'input，label { display：block;變爲'標籤{display：block; }' –

@import url("//fonts.googleapis.com/icon?family=Material+Icons"); 
 

 
label { 
 
    display: block; 
 
} 
 

 
input{ 
 
    display:inline; 
 
    }

<div> 
 
    <label for="username">Username</label> 
 
    <input id="username" 
 
     placeholder="Username" 
 
     class=""> 
 
    <i class="material-icons">accessibility</i> 
 
</div>

來源

2017-05-03 22:25:02

你甚至不需要'input {display：inline; }'因爲內聯是''的默認值 –

必須將輸入顯示爲inline-block的

label { 
    display: block; 
} 

input { 
    display: inline-block; 
}

https://jsfiddle.net/51zrg6ms/2/

來源

2017-05-03 22:24:48

不，它不需要'inline-block' - 'inline'工作正常，並且是'input'元素的默認顯示屬性。 –

是的，你可以;但我個人更喜歡inline-block，如果您想稍後添加一些邊距和填充以獲得更完美的定位。 –

顯示圖標旁邊的輸入字段

回答

相關問題