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限制文本框中的使用区域

1 个答案: