I’m aware that bootstrap datalists don’t have custom css support. And yes, I am aware that trying to comes with a few problems. That been said, I did it :), because I had a huge amount of options that was taking the entire web page and I needed to set a max height.
I found here a script (datalist-css) that let’s you apply custom css to datalists, however I am now trying to solve an issue that came with it. Click detection.
Whenever I open the datalist, it will only close if I select an option or if I click on another datalist.
Is there a way to detect when the datalist is unfoccused? If not, is there another way of applying a max height?
I am using mainly jquery btw. Here is a demonstration:
datalist not unfoccusing
Simple example: fiddle
<label for="country">country:</label>
<input list="countrydata" id="country" name="country" size="50" autocomplete="off" />
<!-- must be first element after input and use <option>value</option> format -->
<datalist id="countrydata">
<option>Afghanistan</option>
<option>Åland Islands</option>
<option>Albania</option>
<option>Algeria</option>
<option>American Samoa</option>
<option>Andorra</option>
<option>Angola</option>
<option>Anguilla</option>
<option>Antarctica</option>
<option>Antigua and Barbuda</option>
<option>Argentina</option>
<option>Armenia</option>
<option>Aruba</option>
<option>Australia</option>
<option>Austria</option>
<option>Azerbaijan</option>
<option>Bahamas</option>
<option>Bahrain</option>
<option>Bangladesh</option>
</datalist>
<script src="https://cdn.jsdelivr.net/npm/datalist-css/dist/datalist-css.min.js"></script>
CSS is not needed but here it goes:
datalist {
position: absolute;
max-height: 20em;
border: 0 none;
overflow-x: hidden;
overflow-y: auto;
}
datalist option {
font-size: 0.8em;
padding: 0.3em 1em;
background-color: #ccc;
cursor: pointer;
}
datalist option:hover, datalist option:focus {
color: #fff;
background-color: #036;
outline: 0 none;
}
LauNR13 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
7