输入字段设置为响应式

Question

我的响应小问题。在div中，使用Google Map最大化和最小化选项。在div中添加的自定义输入字段。重点是：

1.My div is normal size the input field showing correct position

2.When i maximize the div input field is not responsive 

请参阅附件中的图像。

最大化之前的图像：

最大化后的图片：

这段代码补充了我的自我

position: absolute;
margin: 1px 0;
padding: 0 3px;
right: 4%;
top: 11%;
color: #000 !important;
border: 1px solid #2B9089;
border-radius: 0px !important;
z-index: 9;
width: 125px;

Answer 1

Try using percentual width. In you css file do something like this.

input.my-text{
  width:30%
}

if the margin is an issues as well you can use the same method like:

input.my-text{
  margin-rigth:5%
}

Seen your edit try this:

position: absolute;
margin: 1px 0;
padding: 0 3px;
right: 4%;
top: 11%;
color: #000 !important;
border: 1px solid #2B9089;
border-radius: 0px !important;
z-index: 9;
width: 5%;

Answer 2

您应该使用CSS input-search将search-icon和position:relative;都保留在同一父div中。肯定会根据您的需要根据搜索图标控制您的搜索输入：

<div style="position:relative;">
    <input name="" type="text" placeholder="search" />
    <div>Search-icon</div>
</div>