在文本輸入框中定位圖像

Question

我想將圖像放在文本輸入框中，並嘗試通過將圖像標籤嵌套在輸入標籤內並使用輸入的相對位置和圖像的絕對定位來定位圖像並將圖像的「右」和「頂」值設置爲0.我認爲這會將圖像放在文本框的右側。相反，它將圖像放在網頁的右側。我不確定這是爲什麼，我找到了一個解決方案，通過改變'top'和'right'的值來將它放在我想要的位置，但它看起來應該是第一種方法，任何人都可以解釋它爲什麼不行？

這是用於文本輸入和圖像的HTML。

<input = "text" id="searchbar"> 

      <a href="#voice"> <img src ="microphone.png" id="voicebutton"/> </a> 

</input> 

這是我雖然會工作的CSS。

#searchbar{ 
    border: 0.6px solid #dbdbdb; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
    width:600px; 
    height:37.5px; 
    position:relative; 
} 

#voicebutton{ 
    width:16px; 
    height:23px; 
    position:absolute; 
    right:0; 
    top:0; 
} 

這是工作的CSS。

#searchbar{ 
    border: 0.6px solid #dbdbdb; 
    display:block; 
    margin-left:auto; 
    margin-right:auto; 
    width:600px; 
    height:37.5px; 
    position:relative; 
} 

#voicebutton{ 
    width:16px; 
    height:23px; 
    position:absolute; 
    right:395; 
    top:207; 
} 

Answer 1

兩種方式做到這一點：

- 使用屬性background-size和background-position在輸入框中設置您的background-image。 例子：

input[type=text] { 
 
    box-sizing: border-box; 
 
    padding-left: 10px; 
 
    font-size: 40px; 
 
    width:85%; 
 
    height:55px; 
 
    border: 2px solid black; 
 
    background-color: floralwhite; 
 
    background-image: url("https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png"); 
 
    background-size: 50px 50px; 
 
    background-repeat: no-repeat; 
 
    background-position: right; 
 
} 
 

 
input[type=text]:focus { 
 
    background-color: pink; 
 
    outline: none; 
 
}

<input type="text" placeholder="write here" id="searchbar">

- 使用陰性切緣放置圖像懸停它（你可以設置圖像是一個鏈接）。例如：

input[type=text] { 
 
     box-sizing: border-box; 
 
     padding-left: 10px; 
 
     font-size: 40px; 
 
     width:85%; 
 
     height:55px; 
 
     border: 2px solid black; 
 
     background-color: honeydew; 
 
     vertical-align: top; 
 
    } 
 

 
    input[type=text]:focus { 
 
     background-color: skyblue; 
 
     outline: none; 
 
    } 
 

 
img { 
 
margin-top: 3px; 
 
margin-left: -60px; 
 
}

<input type="text" placeholder="write here" id="searchbar"><a href="#"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;"></a>

Answer 2

在HTML中，輸入標籤沒有結束標記（相對於XHTML），所以你的標籤是您的輸入標籤的外部。

Answer 3

首先，你的像素中不能有小數，如height: 37.5px;。這不起作用。另外right: 395;不起作用，因爲它沒有指定什麼用法：像素，ems，百分比？ input="text"是不正確的，它應該是input type="text"，因爲這可以是例如。 email或radio。這就是說，爲了實現你想要的，你可以在你的輸入字段（如.box-wrapper）上添加一個包裝，並給它一個與輸入字段大小相同的相對位置。這將結束下面的例子。

.box-wrapper { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 38px; 
 
} 
 

 
#searchbar{ 
 
    border: 1px solid #dbdbdb; 
 
    display: block; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    width: 600px; 
 
    height: 38px; 
 
    position: relative; 
 
} 
 

 
#voicebutton{ 
 
    width: 16px; 
 
    height: 23px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
}

<div class="box-wrapper"> 
 
    <input type="text" id="searchbar"> 
 
    <a href="#voice"><img src ="http://dummyimage.com/50x50/ffff00/fff" id="voicebutton"/></a> 
 
</div>

Answer 4

輸入標籤在HTML沒有結束標籤，你應該從你的HTML代碼中刪除結束標記，還可以在輸入框中改變你的CSS像元素位置這個（你的CSS幾乎是正確的，問題是HTML）：

#voicebutton{ 
    width:16px; 
    height:23px; 
    position:absolute; 
    right:16px; 
    top:16px; 
}