Scroll bar for multiple selection select tag without using div element (not supported in firefox)

.selector select[multiple="multiple"] {
  border-radius: 0;
  height: 200px;
  margin: 0 0 0 -1px;
  max-width: 368px !important;
  padding-left: 3px;
  width: 368px !important;
}
<select id="id_included_packages_from" class="filtered" multiple="multiple">
  <option value="1" title="Internet">Internet Everywhere</option>
  <option value="2" title="Internet 20MB">Internet 20MB/Day</option>
  <option value="3" title="Trnet Plus">Early internet days, fetching the file.......................................................TTTTT.</option>
</select>

Google Chrome is enabling scroll, but Firefox is not. Is there a way to have a horizontal scroll bar without adding a div tag?

htmlcss

Answer №1

It just dawned on me that you may be referring to a horizontal scrollbar. In that case, the solution is as follows:
You will need to utilize the div workaround for cross-browser compatibility.

Using a div for this purpose is perfectly fine. Is there a specific reason why you wish to avoid it? Let us know so we can assist you further.

Prior answer: To create a scrollbar like this, you can use the following code:

.filtered {
  height: 50px;
  overflow-y: auto;
}
<select id="id_included_packages_from" class="filtered" multiple="multiple">
  <option value="1" title="Internet">Internet Everywhere</option>
  <option value="2" title="Internet 20MB">Internet 20MB/Day</option>
  <option value="2" title="Internet 20MB">Internet 20MB/Day</option>
  <option value="2" title="Internet 20MB">Internet 20MB/Day</option>
  <option value="3" title="Trnet Plus">Early internet days, fetching the file.......................................................TTTTT.</option>
</select>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for converting plain text output into HTML tags

I recently set up a contact form 7 on my website, and I'm trying to customize the message that appears after submission. However, I'm running into an issue when attempting to split the message into two different colors. I created a span class to ...

phphtmlcsswordpress

Ways to display an error message in Angular 8 when entering anything other than numbers in a text box

In my Angular 8 application, I have a text box that only allows the user to type numbers. If they try to type an alphabet or special character, it should display an error message below the text box. The error message should disappear once the user starts ...

htmlangulartypescript

What could be causing the bootstrap card alignment issue when trying to display them side by side

I am currently developing a Flask project where I'm showcasing user information retrieved from the database within bootstrap cards. Utilizing jinja2 to iterate through an object statuses {% extends "base.html" %} {% block content %} {% if ...

htmlcssbootstrap-4jinja2

Avoid the CSS ::before content from being highlighted

I have implemented the ::before pseudo-element for my ordered and unordered lists in my application. However, I am facing an issue where only the ordered lists are highlightable, and I am unable to change the highlight color to match the overall look of my ...

htmlcsssasswebkit

Begin an HTML document by loading it with xml.Load

I am looking to access an HTML document stored as a string retrieved from a StreamReader on the web and then convert it into an XMLDocument. Currently, I am using the following code: XmlDocument doc = new XmlDocument doc.Load(string containing the retrie ...

c#htmlxmldocument

Employ CSS to target the initial and final items within sets of identical elements

I created the following CSS styles: div { width: 300px; text-align: center; } p:not(.vrt) { text-align: left; } p.vrt { writing-mode: vertical-rl; display: inline-block; } div :nth-child(1 of p.vrt) { margin-left: 0; } div :nth-last-child(1 of ...

cssselection

Saving an image and form data together in local storage can be accomplished by using JavaScript

Is there a way to save an image to local storage along with form data? I would like to store the form data in a database and keep the image in local storage. Any help would be greatly appreciated. Thank you! <form id="saveImageForm"><input type ...

javascriptjqueryhtml

Tips for sending an email without using MAILTO in JavaScript or jQuery

Today is a great day for many, but unfortunately not for me. I've been struggling with this issue for over two weeks now and can't seem to find a solution anywhere on the internet. Stack Overflow always comes to my rescue when things get really t ...

javascriptjqueryhtmlemail

Ways to optimize the spacing between the menu bar and widgets

I have successfully incorporated multiple images side by side on my blog Following is the code used for this layout: <div class="images"> <figure> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsT ...

htmlcsscss-floatblogger

The Reliability of Using CSS Pixel Font Sizes

Imagine I need to display two capital 'T's, each exactly one inch tall. One 'T' appears on a Macbook Pro with Retina Display (220 DPI, CSS pixel ratio 2), and the other on an iPhone 4S (326 DPI, CSS pixel ratio 2). To achieve this, I se ...

htmlcssfontsmedia-queriesfont-size

Listen up, Javascript keyboard input recorder

I am aiming for the search bar to pop up when you type. The code below is functioning, but I am facing an issue where the search bar pops up even when typing in a different input field, such as the comment input. Is it feasible for the search bar not to ...

javascriptjqueryhtmlcss

I am facing an issue where the table in my Laravel Vue component is not displaying the data from

Recently, I've been diligently following an instructional series on VUE applications by a highly recommended YouTuber. Every step was meticulously executed until I hit a roadblock out of nowhere. The data from my database refuses to display on the fro ...

javascripthtmldatabaselaravelvue.js

Material Design Angular2 Toolbar

I am currently working on designing a toolbar using Material and Angular2. My main challenge is formatting the toolbar in such a way that the search bar appears centered in white, while the "Create Project" button and other buttons are aligned to the right ...

htmlcssangularangular-materialangular-material2

Having trouble selecting a dynamically changing div element in Selenium with Java using a click action

Every time I navigate to www.reddit.com and enter a query in the Search field, then press enter to go to the first valid link within a subreddit, sorting options are presented. By default, it is set to BEST but I wish to change it to TOP. My test class cod ...

javahtmlseleniumdynamic

Manipulate text within a text area using jQuery

Good afternoon. How can I use JavaScript to update the text in a textarea input? I currently have some content in my textarea that includes a PublisherImprintName tag, and I want to remove it using jQuery. <PublisherInfo> <PublisherName>A ...

javascriptjqueryhtml

Transferring an HTML file to a destination stream

Currently, I'm in the process of constructing a proxy server. One of the tasks I'm tackling involves blocking specific URLs. I have developed a simple HTML page that is supposed to display whenever a blocked URL is requested, but unfortunately, ...

javahtmlproxyserver

Error Icon Displayed Incorrectly in Dynamically Generated List Items in Phonegap Android App

My attempt to dynamically create a list item with JSON response and set the data-icon to "check" is not working as expected. The result always shows "arrow-r" data-icon instead. This is how I generate the list item: function CallvarURL(url) { var res ...

androidjquerycsscordova

Fetch several images simultaneously from a photo collection using JavaScript by generating a batch process

I need help with creating an image gallery that allows users to download multiple images by selecting them. The download should result in a zip file. I have checkboxes for selecting the images, but I'm struggling to figure out how to enable the downlo ...

javascriptjqueryhtmlbootstrap-4

Achieve an overlapping effect with grid items

I'm in the process of creating a CSS grid layout where the header overlaps the next row. Below is a snippet of my code with the header positioned on top, and the linked image should give you an idea of what I'm aiming for. Thank you! https://i ...

htmlcsscss-grid

Scrolling to the bottom of the page triggers jQuery to load additional content

Is your jQuery script not working properly when attempting to load more content upon reaching the bottom of the page? It seems to be functional on Safari/iPad and Android Mozilla browsers, but encountering issues on default Android and Chrome browsers. ...

javascriptandroidjquerycssscroll