Single section and multiple selection modes in select2 look different. In single some window below opens with text but in multiple it looks like a search bar in google without any text. How to make the same way single selection option in select2?
Actually you can limit your options:
$('selector').select2({
maximumSelectionLength: 1
});
You are not the first person to try to do this. But it is not available now.
You can check this issue for some variants: https://github.com/ivaynberg/select2/issues/1345
The developers answer for this issue was:
This has been pulled in for the 4.1.0 release (forgot to tag it), so with any luck this should hit the Select2 core or be available as a plugin within the next few months.
Now it has version 4.0.3, wait for new release and hope that they realy do this :)
I am not sure whether you asked for this. But i was searching for this and though being late, thought it will be helpful to someone.
I have used SCSS.
Demo Here: https://jsfiddle.net/ufr4dw5j/
.js-example-basic-single{
width:200px;
}
.select2{
&.select2-container{
top: -4px;
.select2-selection--single{
height: 50px;
border-radius:0;
&:focus{
outline: none;
}
.select2-selection__rendered{
line-height: 50px;
}
.select2-selection__arrow{
display:none;
}
}
}
}
.select2-container--default{
&.select2-container--open{
top:6px !important;
}
.select2-dropdown--below{
top: -4px;
}
.select2-search--dropdown{
padding: 0;
.select2-search__field{
height: 48px;
border:0;
border-bottom: 1px solid #aaa;
padding:10px;
box-sizing: border-box;
}
}
}