html - css中的下拉文本框设计

Question

我想创建一个像 bootstrap 一样的下拉框。即使我创建了它，但实际上我需要它在简单的 css 中。因为当我在我的页面上使用 bootstrap 文件时，由于我从未在我的网站上添加任何与 bootstrap 相关的代码，所以所有格式都变得错误。

在我要创建的图像下方。

下面是我使用 un bootstrap 的代码，它看起来有点像上图。但我不知道我是如何在 css 中做到这一点的。

请任何人帮助我，我如何在没有 Bootstrap 的情况下使用 css 制作下拉文本框，如上图所示。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/css/bootstrap-select.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.5/js/bootstrap-select.min.js"></script>



<div class="form-group col-md-6 col-lg-6 col-sm-6">
  <label>Title</label>
  <select id="txtTitle" class="form-control selectpicker">
        <option value="default">Please Select</option>
        <option value="one">One</option>
        <option value="two">Two</option>
    </select>
</div>

<div class="form-group col-md-6 col-lg-6 col-sm-6">
  <label>Choose Activities</label>
  <select id="DDLActivites" data-style="btn-default" class="selectpicker form-control" multiple data-max-options="2">
        <option>Mustard</option>
        <option>Barbecue</option>
     </select>
</div>

Answer 1

我认为您有 2 个(快速)选项:

1. 已选择:https://harvesthq.github.io/chosen/
2. 选择 2:https://select2.org/

两者看起来与 bootstrap 版本完全一样，并提供相同的功能，而不会弄乱您的主题样式。