Дизайн выпадающего текстового поля в css

Question

Я хочу создать выпадающий список, такой как начальная загрузка. Даже я создал это, но на самом деле мне это нужно в простом CSS. Потому что, когда я использую файл начальной загрузки на своей странице, тогда все форматы становятся неправильными, потому что я никогда не добавлял никакой связанной с кодом начальной загрузки на свой веб-сайт.

Ниже изображение, которое я хочу создать.

Ниже мой код, который я использовал un начальной загрузки, и он немного похож на изображение выше. Но я не знаю, как я сделал это в CSS.

Пожалуйста, кто-нибудь, помогите мне, как я делаю выпадающее текстовое поле в 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/

Оба выглядят точно так же, как и версия для начальной загрузки, и предлагают одинаковую функциональность, не мешая стилю вашей темы.

Answer 2

Взгляните на этот пример, используя select2. Прямо с сайта select2.

http://jsfiddle.net/r0yh3b4o/1/

 <select class="js-example-basic-single" name="state" style="width:100%">
   <option value="AL">Alabama</option>
   <option value="WY">Wyoming</option>
  </select>

    $(document).ready(function() {
        $('.js-example-basic-single').select2();
    });