Question

我有一个select元素，它直接针对输入。在大多数情况下，它看起来很棒，但是某些选项上的空格过多。除非我自己设置一些静态宽度，否则select会扩展到其最大选项的宽度。

我要使之成为选择选项，使其仅占用与当前显示选项相同的宽度。我会问是否有可能，但是我知道这是可以的，因为我已经在他们的搜索栏中的Amazon's homepage上看到了它。控制他们的搜索过滤器的select的行为本质上就是我要在自己的网站上重新创建的行为，但是我无法确切了解他们的行为。这里的代码重现了我目前所拥有的基本思想。

HTML：

<select>
  <option>All</option>
  <option>Consoles</option>
  <option>Games</option>
  <option>Equipment</option>
</select>
<input type="text" />

CSS：

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  border-right: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 10px;
  text-align: center;
  float: left;
}

input[type='text'] {
  height: 44px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  margin: 0;
  padding: 0 5px;
  font-size: 14px;
  min-width: 300px;
}

我对here的所有内容也很摆弄。

我知道我可以使用JavaScript使其工作，但这绝对是我的最后选择。如果可以的话，我想用纯HTML和CSS来做。任何帮助将不胜感激。

Answer 1

希望这正是您想要的东西。但是由于<select>宽度需要计算或由其他值确定，因此需要一些JavaScript。我使用了纯jQuery，并对HTML和CSS进行了一些更改。

问题的答案是，您需要将选择的选项附加到另一个选择选项中，以获取当前选项的宽度，并保持其宽度，直到下一次更改选择为止。

HTML：

<div id="main-div">
<select id="resized">
  <option value="All">All</option>
  <option value="Consoles">Consoles</option>
  <option value="Games">Games</option>
  <option value="Equipment">Equipment</option>
</select>
<input type="text" />
</div>

<!-- hidden select to calculate the selected option width -->

<select id="hidden_select">
  <option id="hidden_select_option"></option>
</select>

CSS：

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  border-right: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 10px;
  text-align: center;
  float: left;
}

input {
  height: 44px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  margin: 0;
  padding: 0 5px;
  font-size: 14px;
}

#main-div{
  display: none;
  width: 375px;
}

#hidden_select {
  display: none;
}

jQuery：

$(document).ready(function() {
        $('#resized').change();
    $("#main-div").css("display", "block");
});
 $('#resized').on("change", function(){
    $("#hidden_select_option").html($("#resized option:selected").text());
    $(this).width($("#hidden_select").width());

    //fix the input filed width
    var x = $("#main-div").width();
    var y = $(this).width() + 21;
    $("input").width((x-y) - 12);
 });

注意：值21和12是您的select和input的填充值和边框值。

工作代码：

https://jsfiddle.net/y82x60fa/10/

Answer 2

这是使用简单jquery的解决方案。在Amazon's home page上也使用js或其他脚本语言完成。

 $('#resizingSelectTag').change(function(){
    $("#widthTempOption").html($('#resizingSelectTag option:selected').text());
    $(this).width($("#selectTagWidth").width()); 
 });

#resizingSelectTag {
 width: 50px;
}
  
#selectTagWidth{
 display : none;
} 
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  border-right: 0;
  box-sizing: border-box;
  height: 44px;
  padding: 10px;
  text-align: center;
  float: left;
	position:absolute;
	border-right: 1px solid #ccc;
}

input[type='text'] {
  height: 44px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 0 4px 4px 0;
  margin: 0;
  padding: 0 5px;
  font-size: 14px;
  min-width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="resizingSelectTag">
      <option>All</option>
       <option>Lorem Ipsum</option>
       <option>Lorem Ipsum is</option>
</select>

<select id="selectTagWidth">
       <option id="widthTempOption"></option>
</select>
<input type="text" />

更改每个活动选项的选择元素的宽度

2 个答案: