如何設置文本輸入的樣式，以便在不使用背景圖像的情況下在左側顯示一個圖標？

Question

我正在嘗試創建類似於Pearson的TestNav登錄名中顯示的用戶名和密碼輸入的文本輸入（忽略黃色框）。

為了使圖標位於左側，他們使用background-image屬性。 我想知道是否有可能在不使用任何圖像的情況下達到相同的效果。 我已經很接近了 ，但是有兩個問題。 圖標框右邊的邊框是四舍五入的，並且如果您單擊圖標，它不會使輸入集中。 我嘗試使輸入框背景透明，並在其后放置圖標，但是如果站點位於密碼管理器中，Chrome會覆蓋背景色。

這是我嘗試的CSS / HTML：HTML：

<div class="field">
  <input type="text">
  <div class="icon">
    <i class="fa fa-user"></i>
  </div>
</div>

CSS：

.field input {
    outline: none;
    border: 0px solid #fff;
    font-size: 14px;
    padding: 5px 5px 5px 44px;
    position: absolute;

    width: 260px;
    height: 40px;

    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 0px rgba(186,213,232,1);

    transition: border 0.5s ease-in-out 0s, box-shadow 0.3s ease-in-out 0s;
}

.field input:focus {
    border: 1px solid #2977FF;
    box-shadow: 0px 0px 10px 2px rgba(186,213,232,1);
}

.field .icon {
  display: flex;
    justify-content: center;
    align-items: center;


    height: 36px;
    width: 36px;
    padding: 0;
    border: 1px solid #eee;
    border-radius: 3px;
    margin: 1px 0px 0px 1px;
    position: absolute;
    background-color: #eee;
}

Answer 1

嘗試將圖標div更改為標簽

<div class="field">
  <input type="text" id="this-input">
  <label class="icon" for="this-input">
    <i class="fa fa-user"></i>
  </label>
</div>

這樣，當單擊它時，它將聚焦它引用的元素（for =“ this-input”）

固定邊界半徑。 從更改圖標樣式

border-radius: 3px;

至

border-radius: 3px 0 0 3px;

從左上角開始，左上角為3px，然后右上角為0，右下角為0，左下角出生者為3px

Answer 2

您可以使用use：input：before並使用諸如fontawesome之類的圖標字體作為內容的樣式。

例：

<input type="text" id="this-input" class="icon-whatever" />

Answer 3

可以通過使用邊界半徑來刪除圓形（如您的情況），
border-top-right-radius：0px;
border-bottom-right-radius：0px;

您需要使用Javascript來聚焦輸入標簽。 因為.icon類不是輸入標記的一部分（在代碼中，輸入標記是獨立的，而.icon是獨立的）。 為了做到這一點，請使用focus（）函數

我希望這有幫助

 function cool() { document.getElementById("cool").focus(); } 

 .field input { outline: none; border: 0px solid #fff; font-size: 14px; padding: 5px 5px 5px 44px; position: absolute; width: 260px; height: 40px; box-sizing: border-box; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0px 0px 0px 0px rgba(186,213,232,1); transition: border 0.5s ease-in-out 0s, box-shadow 0.3s ease-in-out 0s; } .field input:focus { border: 1px solid #2977FF; box-shadow: 0px 0px 10px 2px rgba(186,213,232,1); } .field .icon { display: flex; justify-content: center; align-items: center; height: 36px; width: 36px; padding: 0; border: 1px solid #eee; border-radius: 3px; border-top-right-radius:0px; border-bottom-right-radius:0px; margin: 1px 0px 0px 1px; position: absolute; background-color: #eee; } 

 <div class="field"> <input type="text" id=cool> <div class="icon" onclick="cool()"> <i class="fa fa-user"></i> </div> </div>