如何將圖像放置在文本輸入的左側？
[英]How to get image to be placed on the left side of text input?
問題描述
我一直在嘗試將圖像放入左側的文本輸入中，我嘗試使用浮點數，我嘗試將其設置為 div 並將其包裝，我嘗試將背景圖像制作為圖像，它要么破壞它或者沒有區別。 不知道該怎么辦。
body { background-color: #141c2f; }.search { background-color: #1d2c4c; border: none; border-radius: 10px; text-align: center; width: 500px; height: 50px; text-decoration: none; }.infoBox { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./static/css/app.css"> <title>Github User Search App</title> </head> <body> <div class="infoBox"> <input class="search" type="text" placeholder="Search.."> </div> </body> </html>
1 個解決方案
解決方案1
0 2022-08-25 04:20:51
假設您要將輸入上方的圖像放在左側（如果您只想將它們並排，請使用display: flex in class .infoBox ）。 因此，您可以使用:before來獲得它，將此代碼添加到您的：
.infoBox {
position: relative;
}
.infoBox:before {
content: '';
background: url('your image url') center center no-repeat;
width: 50px;
height: 50px;
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 10px 0 0 10px;
}
.search {
padding-left: 65px;
}
所有屬性都可以根據自己的喜好進行修改。
在中心縮放后如何獲取圖像/div左側的滾動條
[英]How to get Scrollbar for left side of the Image/Div after it is scaled at the center
jQuery：如何關注輸入文本字段，以便將光標放在文本的末尾？
[英]jQuery: How to focus on input text field such that the cursor is placed at the end of the text?
如何在輸入矩形的左下角正下方獲得 x 和 y position？
[英]how do i get the x and y position directly under the left bottom side of the input rectangle?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.