Modify the currently selected color in a multi-select menu by editing the option tag

Why does the selection option value turn blue, but then become a faint grey when clicking on anything else on the page? Can these colors be changed, especially the faint grey for better accessibility?

I've experimented with various CSS approaches, but none have been successful.

<label class="multiDropdown-label">Multiple Select
  <select multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
</label>
htmlcsszurb-foundation

Answer №1

@nikoskip's input provided a solution to my query.

select[multiple]:focus option:checked {
  background: red linear-gradient(0deg, red 0%, red 100%);
}

Answer №2

Currently working on optimizing this code... stay tuned for updates

select[multiple]:focus option:checked {
  background: white linear-gradient(0deg, white 0%, white 100%);
  outline:none!important;
}

select[multiple]:focus option {
  background: white linear-gradient(0deg, white 0%, white 100%);
}

select[multiple] option{
   background: white linear-gradient(0deg, white 0%, white 100%);
}

/* disable box highlighting completely */
select:active, select:hover, select:focus-within, select:focus {
  outline: none;
}
select {
       width: 100%;
       padding: 0;
       border: none;
       font-size: 16px;
       color: #868686;
       overflow:hidden; /* no scrollbar */
}
select option {
    display: inline;
    float: left;
    margin-right: 128px;
    overflow:none;

}

[selected] { /*functionality varies by browser, adjustments in progress */
color:#f00; 
font-weight:bold;
}
<select multiple>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</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

The browser freezes after a short delay following an Ajax request

I recently created an admin panel with notification alerts using Ajax. Initially, everything was working smoothly, but after a few minutes, the browser started freezing. I'm new to Ajax development, so I'm unsure what could be causing this issue. ...

javascriptajaxhtml

Instructions on how to delete a specific tag from a table using its ID

I have a complex HTML table generated by a PHP loop with multiple rows. My goal is to eliminate all the a tags within the td tag where the ID of the td tag is equal to 1 or another specified value. <table> <tr> <td>ID: 1</ ...

javascriptjqueryhtml

The Google Docs viewer is displaying an empty screen

I have been utilizing the Google Docs viewer on my website: <div class="embed-r embed-responsive-a"> <iframe class="embed-responsive-it" src="https://docs.google.com/viewer?embedded=true&amp;url=http://LINK.PDF"></iframe> </div& ...

javascripthtmlcsspdfgoogle-docs

Transforming HTML Code in a PHP Document to a PDF Document

I have a PHP file that interacts with a database to update the HTML content. There is a button on the page labeled "Export As PDF". I attempted to convert the page to a PDF using HTML2FPDF, but encountered this error message: FPDF error: Unable to create ...

phphtmlpdfhtml2pdf

What are the advantages of using REM instead of PX?

When is it ideal to choose rem over px units in CSS? Many articles advocate for using REM to accommodate user preferences, particularly when it comes to font size. However, the focus tends to be solely on font size rather than considering other aspects lik ...

htmlcssunits-of-measurement

Utilizing JavaScript, HTML, and CSS to incorporate images within circular frames

After finding inspiration from this question about rotating objects around a circle using CSS, I decided to modify the code to include images of Earth orbiting the Sun. The challenge was to make one image orbit another like a planet circling its star. Ear ...

javascripthtmlcss

Adjust the size of a div by clicking a button using Javascript

<script type="text/javascript"> var btn = document.getElementById("btn"); var panel = document.getElementById("panel"); var btn2 = document.getElementById("btn2"); function expandPanel() { btn.style.display="none"; panel.style="overflow:hidd ...

javascriptphphtmlcss

Events related to SVG elements

I have a unique situation where a div containing multiple SVG elements that act as buttons is added to the page after the user interacts with it. I am trying to add events to these SVG elements using event delegation, where I inspect the target of the even ...

javascripthtmlsvg

How can you trigger a modal to appear when an image is clicked?

There are images inside <div> tags. When one of the images is clicked, a modal appears to display information about the specific image. Each modal has a unique id or class, such as modal4. My example: <image type="image" src="Images/Drake.jpg" ...

htmlcssbootstrap-4

I am puzzled by the fact that the center cell of my table is longer than the surrounding cells

I'm currently working on a project that involves creating a webpage. I have a table, and when I execute the code, I notice that the center cell appears longer than the rest of the cells. table,td,tr{border: 1px solid red; } <!document html> ...

htmlcss

What is the best way to maintain the value of variables across different HTML files?

Imagine having a scenario where a page is connected to a .js file. This file contains code that assigns a value to a variable like this: var foo; function bar() { foo = //value generated through user input } bar(); Now the goal is to move t ...

javascripthtml

How can I eliminate excess cell spacing from a div that has a display of inline table?

This situation is really frustrating. While using Firefox and Opera, I am encountering unnecessary padding between my nested divs, which is not the case with Chrome and Safari. I attempted to use border-collapse:collapse However, it did not work. Do you ...

csspaddingcss-tables

Why is CSS styled by jQuery not working on hidden elements?

My challenge involves applying CSS to hidden elements and revealing them when a user interacts with a radio button. The issue arises when using CSS through jQuery to dynamically set the width of these elements. Because the elements are initially set to dis ...

jquerycss

Positioning a file drop area discreetly hidden behind a cluttered data-packed table

I have been experimenting with the ngx-file-drop module for Angular 4. Lately, I have been working on adding a file drop feature to a website that displays data in a table using *ngFor and *ngIf directives. My goal was to create a background drop zone beh ...

htmlcssangular

Turn off dropdown menu animation (JavaScript)

I am trying to completely disable the transition effect on my drop-down menu. Below is the JavaScript code that I believe needs to be changed: function(e) { if ((/input|textarea/i.test(e.target.tagName) ? !(32 === e.which || 27 !== e.which && (40 !== e ...

javascriptcssbootstrap-4transition

Resizable vector graphics with consistent border dimensions

I need a solution that maintains a constant line width while still making the SVG responsive. Here is the desired outcome: https://codepen.io/dudleystorey/pen/wMLBLK The example linked above achieves this using CSS, but I am looking to achieve the same r ...

htmlcsssvgresponsive

What could be causing the modal to not appear when clicking on this div?

$(function() { $("#pagination a").trigger('click'); // When the page loads, trigger a click event $('body').on('click','div.well well-sm',function(){ var list = $(this); $('#myModal .modal-title').h ...

jqueryhtmlcssajax

What is the best approach for extracting multiple images from a URL and inserting them individually into separate divs using JavaScript?

Is there a way to elegantly display images horizontally on my website without them stacking on top of each other? I want each image to be placed side by side in a specific space for a beautiful layout. <!DOCTYPE html> <html> <head ...

javascripthtmlcss

Ways to verify the header (h1, h2, h3) attribute of a DOM element

In JavaScript or jQuery, I have a reference to a link. How can I determine if it is an <h1>, <h2>, or another type of heading element? ...

javascriptjqueryhtmldom

What is the best way to conceal just the scrollbar thumb in a Bootstrap modal?

When opening a modal in Bootstrap according to the documentation, it only hides the scrollbar thumb, like shown in the examples below: However, my modal hides the entire scrollbar. How can I modify it to hide only the scrollbar thumb? body { height: ...

jquerycsstwitter-bootstrapbootstrap-4bootstrap-modal