How to re-design pillboxes

How Do I...
#1

Hi, I am fairly new to Select2, CSS and Django as well, so sorry if my question seems trivial.

I really like the look of Select2 and trying at the moment to integrate it into CrispyForms within a Django app.

My aim:
I have two multi-select boxes (ManyToMany Django model).

One of the boxes I would like the following
a) The width of the PillBox should be fixed (the whole input field)
b) Selections made will stack-up on top of each other (instead of side by side, and top of like now)
b) The search function (select2-show-search) should be below the selection stack, ie I don’t have to move the mouse etc, but can just use keyboard and press enter for every selection made.

The other box, I would like the following.
a) the selection field is divided into two, left side and right side (two selection fields). The left I would like to be able to fill up with Blue pillboxes and the right I would like to be able to fill up with Red pillboxes. Problem I found was to be able to “easily” manipulate background color in CSS (it became either or).

For 1 and 2 I kindly ask for help/hints/references how to achieve it.
I have tried to ask the same question at Stackoverflow, but unfortunately no answer.

Many thanks
J.

#2

I’m assuming you’re comfortable writing CSS rules to override the default styling of the Select2 components.

For #1 a) & [first] b), I would think you just need to set the width of the pillboxes to 100%, and change their display property to block. For the third item under #1, if I understand what you want, I think the style rules I provided above will force the search box to behave as you describe, since there won’t be space next to any pillbox to type into, the typing area will have to move to a new line below the last pillbox.

#2 is potentially harder, and my suggestion for a solution would depend on how items are selected for each “side” of the selection area. For instance, if every other selection goes to the opposite side (say the first selection goes to the left side, the second selection goes to the right side, the third selection goes to the left side, the fourth selection goes to the right side, etc., then using CSS rules based on :nth-child(odd) and nth:child(even) should accomplish what you want (you would also want to set the pillbox width to 50% to make this work). I can also imagine solutions that use flexbox or grid, but again this depends on how you intend to select items for each side of the selection area.