Scroll bar in a SELECT in html

Question

Talk to you guys, I have a SELECT in my HTML that when the results exceed the width limit, it breaks a line. I would like instead of breaking this line, to be added a scroll bar.

Explanatory image:

DEMO PAGE

What css properties should I use? grateful, a big hug!

Answer 1

The input I don’t know, but you can use the textarea:

textarea
{
    height:30px;
    overflow-y:hidden;
    overflow-x: auto;
    white-space: nowrap;
    resize: none;
    border-radius:5px;
}

<textarea>fffffffffffffffffffffffffffffffffffffffffffffffffffffffhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh</textarea>

Edit

As mentioned by @Felipe Nascimento, it is not possible to place elements from the input nor in the textarea as #PCDATA (processed Character data). You will need to use a div even...

Answer 2

Can use overflow-x and white-space: nowrap;, note that the elements have to use display: inline-block;, I believe this doesn’t work with float, then remove it from its elements.

In case your code would look like this (it uses the Select2):

/* itens dentro do select2 */
.select2-selection--multiple .select2-search--inline {
    float: none;/*"remove" o float*/
    display: inline-block;
}

/* área para digitar dentro do select2 */
.select2-selection--multiple .select2-selection__choice {
    float: none;
    display: inline-block;
}

/* área aonde ficam os items e o campo para digitar */
.select2-selection--multiple .select2-selection__rendered {
    overflow-x: auto;
}

An example to see the effect (and that will be useful to future visitors of the question)

.area {
   border: 1px #ccc solid;
   padding: 5px;
   width: 400px;
   overflow-x: auto;
   white-space: nowrap;
}
.area > .item {
    border-radius: 2px;
    background-color: #455a64;
    display: inline-block;
    margin: 0 0 0 2px;
    padding: 5px;
    color: #fff;
}
.area > .item:last-child {
    margin: 0;
}

<div class="area">
    <div class="item">
        Memes
    </div>
    <div class="item">
        Programação
    </div>
    <div class="item">
        Entretenimento
    </div>
    <div class="item">
        Stack Overflow
    </div>
    <div class="item">
        Super User
    </div>
    <div class="item">
        Stack Exchange
    </div>
    <div class="item">
        C#
    </div>
    <div class="item">
        asp.net
    </div>
    <div class="item">
        asp.net-mvc
    </div>
</div>

Answer 3

Try using this CSS property:

overflow-x: auto;

Place in the parent element of these div’s, will make the scroll appear horizontally if necessary, remembering that same parent element must have the height defined.

Reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x