使选择选项看起来像按钮

在Web应用程序中，您可能需要让用户从一组选项中选择一个或多个选项。 在HTML中，通常使用<select>元素和<option>元素来实现此功能。 但是，这样的默认样式是下拉列表，而不是按钮，这可能不太直观。在这里，我们将讨论如何使选择选项看起来像按钮。

通过CSS样式来改变选择框的外观

我们可以使用CSS样式来改变选择框的外观。 首先我们需要隐藏默认选择框，然后用一个样式对其进行替代。 下面是一个简单的示例：

<select>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background: url('images/arrow-down.png') no-repeat;
  background-size: 10% auto;
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  color: #555;
  cursor: pointer;
}

select option {
  background-color: #fff;
  color: #555;
}

这会将默认下拉列表替换为一个带有箭头的自定义按钮。我们将使用-webkit-appearance，-moz-appearance和appearance属性来隐藏默认外观。 background属性用于指定箭头图像，padding属性用于添加内边距，font-size属性用于调整字体大小，border和border-radius属性用于绘制边框和圆角。最后，我们将color和cursor属性设置为对文本和光标进行自定义，以及对选项应用一些基本样式。

通过JavaScript来实现按钮样式的选择框

另一种实现选择框按钮样式的方法是使用JavaScript。 对于这个例子，我们将使用JQuery库。

首先，我们需要在HTML文件中包含JQuery库：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

然后，我们可以使用以下代码来改变选择框的样式：

<select id="select-box">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
  <option value="4">选项4</option>
</select>

#select-box {
  display: none;
}

.select-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  border-radius: 5px;
  background-color: #fff;
  color: #555;
  cursor: pointer;
}

.select-button:hover {
  background-color: #eee;
}

.select-button:after {
  content: '\f0d7';
  font-family: 'FontAwesome';
  padding-left: 10px;
}

.select-box-show + .select-button:after {
  transform: rotate(180deg);
}

.select-box-show option {
  display: block;
  width: 100%;
  padding: 10px 20px;
  color: #555;
  cursor: pointer;
}

.select-box-show option:hover {
  background-color: #eee;
}

.select-box-show {
  display: block;
  width: 100%;
  max-height: 200px;
  overflow-y: scroll;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

$(document).ready(function() {
  $('.select-button').on('click', function() {
    $('#select-box').toggleClass('select-box-show');
  });

  $('#select-box option').on('click', function() {
    var value = $(this).val();
    var text = $(this).text();
    $('#select-box').val(value);
    $('.select-button').text(text);
    $('#select-box').removeClass('select-box-show');
  });
});

这样做的效果是，当用户单击该按钮时，显示下拉列表。 下拉列表中的每个选项都是具有单击事件处理程序的可单击元素。 当选项被选择时，JavaScript将更新按钮上的文本。 在内部，我们也在改变名称时设置了选择框的值。

这是一个简单的方法来实现带有按钮样式的选择框。 它提供了更好的用户体验，并同时保持了更直观的选择模式。

结论

在大多数Web应用程序中，我们都需要让用户从一组选项中选择一个或多个选项。 在本文中，我们讨论了两种方法来将选择选项看起来像按钮。 您可以使用CSS样式或JavaScript来实现此目标。 前者使用样式重写默认值，而后者实现了自定义HTML/CSS/JavaScript选择框，该框包括可单击元素和JavaScript事件处理程序。