After customizing a selection form in Bootstrap to mimic a specific image, I have successfully added the necessary styles. If you wish to see the html and css used to achieve this design, please refer to the link below:
https://i.sstatic.net/b67Yf.png
HTML code for the form on the image:<form method="POST" action="/identify">
<div class="wrap">
<div class="search">
<input type="text" id="value" multiple="multiple" class="searchTerm" name="value" placeholder="Type your values">
<datalist id="val">
<option value="val">val</option>
</datalist>
<button type="submit" class="searchButton" name=form>
<i class="fa fa-search"></i>
</button>
</div>
</div><br>
</form>
CSS code for the form on the image:.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00B4CC;
border-right: none;
padding: 5px;
height: 50px;
border-radius: 0;
outline: none;
color: #9DBFAF;
}
.searchTerm:focus{
color: #00B4CC;
}
.searchButton {
width: 60px;
height: 66px;
border: 1px solid #00B4CC;
background: #00B4CC;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
.wrap{
display: none;
width: 40%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Below is your Bootstrap selection form code: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<section>
<div class="container h-100">
<div class="wrap">
<div class="search">
<form action="/action" method="POST" class="form-inline">
<select id='sel' name='sel' class="selectpicker" multiple data-live-search="true">
<option value="value">value</option>
<option value="value">value</option>
<option value="value">value</option>
</select>
<button type="submit" class="btn btn-primary mb-2">Select</button>
</form>
</div>
</div>
<script type="text/javascript">
$('select').selectpicker();
</script>
</div>
</section>
Having successfully implemented the styles for the image form, now you may want to know how to apply it to your select form design.