如何在文本框內畫垂直線？

Question

這裏是我所需要的圖像..

所以我需要在該文本框中這個垂直線。我不想使用圖像。那麼，有什麼辦法可以在CSS的幫助下，我可以做到這一點。

Answer 1

讓我們嘗試類似的東西，使用絕對定位

.wrapper{ 
 
    position: relative; 
 
    display:inline-block; 
 
} 
 
.wrapper i{ 
 
    position: absolute; 
 
    right: 10px; 
 
    top:10px; 
 
    padding-left:10px; 
 
    border-left: 1px solid #333; 
 
} 
 
.wrapper input{ 
 
    height: 30px; 
 
    width:200px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="wrapper"> 
 
    <input type='text' placeholder='search for anything'/> 
 
    <i class='fa fa-search'></i> 
 
</div>

Answer 2

使用CSS

.yoursearchbox { 
border:0px 0px 0px 1px solid black; 
} 

考慮CSS讀取順時針和第一0像素是最頂部的元素，最後的「1px」會在框的左側畫一條線。