使用 CSS 限制文本框中的使用区域

Question

我在文本框的右侧放置了一张小图片，我试图阻止我的文本运行在该图片后面。但是，我不想通过这样做来限制字符数。有什么建议吗？

<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;
}

Answer 1

人们通常做的是将文本输入和图像放入容器中。他们删除了输入的边框，因此它看起来是一个白色的输入框。他们用边框等样式化容器，使其看起来像是输入。然后他们将（在您的情况下）麦克风图像浮动到右侧，并在输入右侧添加边距。所以文字不会隐藏在图片后面。

基本思路如下：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;
}

使用 CSS 限制文本框中的使用区域

Limiting utilized area within textbox using CSS

css

textbox