css - 为旧版浏览器使用 select 和 input 的搜索框(无 flexbox)

Question

我想通过使用选择和输入来创建一个搜索框。我有两个问题:

• 我希望搜索输入填满所有剩余空间(见灰色背景)；

• 选择并输入要连接的，它们之间没有空格(因为DOM空间)

因为我需要使用较旧的 IE，所以我不能使用 flexbox 或 grid；我也试过 float 。

寻找选择和输入宽度灵活而非固定的解决方案；

我尝试了一个技巧，(在评论中，width: 1%)有时有效，但不适用于 select；

.searchbox { 
display: table;
width: 500px;
background-color: grey;
}

select, .form-group{ 
  display:table-cell;
  margin:0;
}

/*select {
width:1%;
space:nowrap;
}*/

<div class="searchbox">
	<select>
  <option>Abras</option>
  <option>Brat</option>
  </select>
	<div class="form-group">
		<input placeholder="Search" name="q""/>
    <span>icon_placeholder</span>
	</div>
</div>

Answer 1

根据 this float: 在 IE9 中不起作用，但如果你使用 -ms- 它应该在 IE10 + 中起作用。我四处阅读，虽然我列出的网站说 IE9 不支持它，但我发现人们能够使用它的文章。如果您对以下代码有任何问题，请告诉我。

img {
  width: 100%;
  height: 100%;
}

.wrapper {
  overflow: hidden;
  width: 100%;
  max-width: 500px;
}

.left {
  float: left;
  -ms-float: left;
  overflow: hidden;
}

.options {
  width: 75px;
}

.search {
  width: calc(100% - 110px);
}

.image {
  width: 35px;
  height: 35px;
}

.style {
  padding: 8px;
  margin: 0;
}

.full {
  width: calc(100% - 25px);
}

<div class="wrapper">
  <div class="left options">
    <select class="left style">
      <option>Abras</option>
      <option>Brat</option>
    </select>
  </div>
  <div class="left search">
    <input class="style full" placeholder="Search" name="q" />
  </div>
  <div class="left image">
    <img src="https://seeklogo.com/images/C/company-leaf-and-flames-logo-2ECEE07FDD-seeklogo.com.png" alt="img" />
  </div>
</div>