使用CSS限制文本框內的使用區域

我在文本框的右側放置了一個小圖像，我試圖阻止文本在該圖像後面運行。但是，我不想通過這樣做來限制字符的數量。有什麼建議麼？使用CSS限制文本框內的使用區域

<div id="searchContainer"> 
     <!--Search Bar--> 
     <input id="searchBar" type="text" placeholder="Type here to search" onfocus="placeholder = ' '"/> 
     <!--Microphone--> 
     <img id="mic" src="*Super long URL*"/> 
    </div> 

/*Search Bar*/ 
#searchBar { 
opacity: 0.6; 
position: relative; 
display: block; 
height: 24px; 
font-size: 16px; 
font-family: Arial, sans-serif; 
width: 550px; 
}

來源

2015-06-25 Taylor

人們通常會將文本輸入和圖像放入容器中。他們刪除輸入的邊界，使其看起來像是一個白色的輸入框。他們用邊框風格化容器，使其看起來像是輸入。然後他們把（在你的情況下）麥克風圖像漂浮在右邊，並在輸入端添加一個邊界。所以文字不會隱藏在圖像後面。

這裏的基本思想是：http://codepen.io/anon/pen/pJdMJB

HTML：

<div id="searchContainer"> 
    <img src="http://i.imgur.com/w5j4E5O.png"/> 
    <input id="searchBar" type="text"/> 
</div>

CSS：

#searchBar { 
opacity: 0.6; 
position: relative; 
display: block; 
height: 24px; 
font-size: 16px; 
font-family: Arial, sans-serif; 
width: 500px; 
border:none; 

} 
#searchContainer{ 
    border:1px solid #ddd; 
    width:520px; 
} 
img{ 
    width:20px; 
    height:20px; 
    float:right; 
}

來源

2015-06-25 21:48:55 tylerism

是的，有文本區域內的圖像。我假設我可以使文本框不可見，然後填充它，然後在.searchContainer周圍創建一個邊框以模仿文本框的輪廓以實現此目的。我只是好奇，如果有一種更直接的方式來保持文本運行全文的文本框。 – Taylor

哦。你不是指textarea標籤。在HTML textarea中是一個特定的標籤，你不能在其中放置圖像。因此我的困惑。快速提問。爲什麼要刪除佔位符文本onfocus？佔位符的重點在於你不必那樣做。 – tylerism

如果我的措詞令人困惑，我很抱歉。這對我來說還是很新的。我想我的意思是圖像在它的頂部（視覺上被認爲是它的內部）。實際上，我通過添加padding-left：30px並將寬度從550px更改爲520px來找到我的解決方案。對於你的問題，我提出了另一個問題：有沒有更好的方法來將文本放在框中，直到它被點擊？我必須包含onfocus位，因爲佔位符文本在點擊後仍然位於框中。 – Taylor

使用CSS限制文本框內的使用區域

回答

相關問題