Bootstrap multiple select

[lurtnowski]

I really likt this

you can scroll through the options using mouse/arrow keys
When I try to copy it I ran into a problem.

at first glance, everything seems great, but when I make a selection,

How do I figure out what the cause of this is?

It seems to work like bootstraps example when I disable this

<link rel="stylesheet" href="../css/style.css" type="text/css" />

I’m looking but I dont see what the conflict is, am I missing something?

a { color:#999 }
a:hover { color:#000; text-decoration:none }
.card-header img {
	height:30px;
}
label {
	font-weight:bold;
}
.content ol {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
	margin-bottom:30px;
}
.alert-secondary {
    background-color: rgba(0,0,0,.03);
}
 .overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 150px auto;
  background: #fff;
  border-radius: 5px;
  width: 25%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h2 {
  color: #333;
  font-family: Arial, sans-serif;
  margin-bottom:15px;
}
.popup .close {
  position: absolute;
  top: 10px;
  z-index:9;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: #768E99;
}
.popup .content {
  overflow: auto;
  margin-top:0;
}

@media screen and (max-width: 700px){
  .box{
    width: 70%;
  }
  .popup{
    width: 70%;
  }
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}
.badge-light {
	padding:.8em .5em;
}
option:checked {
    display: none;
}
.navbar-dark .navbar-text a:hover {
	color:black;
}
h3 {
	margin-bottom:10px;
}
.breadcrumb { padding-top:0 }
.breadcrumb-item.active {
   color: #999;
}

the HTML of the popup is

<div id="add_asset_front" class="overlay">
	<div class="popup">
		<div class="content">
		  <a class="close" href="#">&times;</a>
			<div class="card" style="margin-top:0">
			  <h3 class="card-header"><span class="icon-plus"></span>&nbsp;&nbsp;Add Asset To Front Of Rack.</h3>
				<div class="card-body">
					<div class="alert alert-light shadow-sm" role="alert" style="margin:10px">
						<div class="card">
							<div class="card-body">
								<div class="row">
									<div class="col">
									  <form method='GET' action="show_rack.php#add_asset_front">
									  <label for="Manufacturer">Manufacturer</label>
										<div class="input-group">
										  <input name="manufacturer" list="manufacturers" id="Manufacturer" type="text" class="form-control" required 
value='45 Drives'>
										  <datalist id='manufacturers'>
<option value='3Com'>3Com</option>
...
...
										  </datalist>					
											<div class="input-group-append">
											  <button class="btn btn-outline-secondary" type="submit"><span class="icon-angle-right"></span></button>
											</div>
										</div>
									  <input type="hidden" name="id" value="166">
									  </form>
									</div>
								</div>
									  <form method='POST' action="asset_lookup_engine.php">
								<div class="row mt-3">
									<div class="col">
									  <label for="model">Model</label>
									  <select multiple class="form-control" name="model" id="model">
<option value='Storinator S45'>Storinator S45</option>
									  </select>
									</div>
								</div>
								<div class="row mt-4">				 
									<div class="col">
									  <button class="btn btn-outline-dark btn-block btn-lg" type="submit" name="submit">
									  <span class="icon-search"></span>&nbsp;&nbsp;Find
									  </button>
									</div>
								</div>
									  <input type="hidden" name="mounting_direction" value="Front">
									  <input type="hidden" name="manufacturer" value="45 Drives">
									  <input type="hidden" name="rack_id" value="166">
									  </form>
							</div>
						</div>
						<div class="row mt-5">
							<div class="col">
							  <a href="asset_lookup_success.php?rack_id=166&type=shelf&mounting_direction=Front" class="btn btn-outline-dark btn-block btn-lg" type="button">Shelf</a>
							</div>
							<div class="col">							
							  <a href="asset_lookup_success.php?rack_id=166&type=unknown&mounting_direction=Front" class="btn btn-outline-dark btn-block btn-lg" type="button">Unknown</a>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

[PaulOB]

This line of css is hiding the option once its selected.

option:checked {
    display: none;
}