Delete the selected background color from custom drop-down lists in versions of Internet Explorer 9 and earlier

In my asp.net application, I have a dropdown element.

I am trying to remove the default blue background color that appears when the dropdown is selected, as shown in the image below. I have tried all the solutions provided in this link, but none of them seem to work. My goal is to remove the blue color when the dropdown loses focus or another element is selected.

https://i.sstatic.net/QJHsF.png

This issue only occurs in IE9 and its earlier versions. Other browsers like Chrome and Firefox do not exhibit this behavior, and Internet Explorer 10 and above are also unaffected.

I have attempted the following CSS:

dropdownId:focus::-ms-value{
    background-color:white;
    color:#000;
}

Is there any feasible way to achieve this using CSS with the select tag ID element, or should I consider utilizing JavaScript/jQuery for this task?

javascriptcssasp.net

Answer №1

To cater to older versions of Internet Explorer, like IE 8 and below, you can develop a separate style sheet:

<!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="ie8-and-lower.css" />
<![endif]-->

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

What is the best way to send an object key/value pair to a Vue template?

I've made progress on my component, but I'm facing an issue where the links are going to http://localhost:5173/[object%20Object]. It seems like I've reached a mental roadblock. This is what my component looks like: <template lang="p ...

javascriptnode.jsvue.jstemplatespug

Configuring the data source for an autocomplete feature in ReactJS Material UI

For one of my React components, I am utilizing the Material UI autocomplete feature. The data source is retrieved from the server asynchronously and has the following structure: const dataSource = [{ id: 001 firstName: 'fname', lastName: &apo ...

javascriptreactjsmaterial-ui

Interested in accessing JSON data from another domain? CORS has got you covered

Over at localhost:8080/abc/v1/doc, I get some json data when accessed directly from the browser's address bar. Here are the response headers: Response Headers Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET, POST, OPTIONS Cont ...

javascriptajaxrestcross-domain

How can I center the navbar logo and use it as a toggle for collapsing the menu?

This is a simple example of a navigation bar <nav class="navbar navbar-expand-lg bg-light"> <div class="container-fluid"> <a class="navbar-brand" href="#">Navbar</a> <button class ...

htmlcssnavbarreact-bootstrapbootstrap-5

The HTML view is unable to display the CSS style due to a MIME-type error

I have recently developed a very simple Express app that is supposed to display a single view called home.html from the view directory. Although the home.html file is being shown, none of the CSS styles I added seem to be loading. The console is throwing t ...

javascriptnode.jsexpress

Steps for signing up for an event using addEventSource in fullCalendar

Whenever I click on the dayClick event, my goal is to add an event to the date that was clicked. This is the JavaScript code I currently have: $('#calendar').fullCalendar({ header: { center: "title", // The title appears in the center ...

javascriptjqueryfullcalendar

Guidelines for queuing method calls using Vue.js

Is there a way to invoke a method using a queue system? Imagine having a method that makes API calls and can only handle 3 calls at once. If more than 3 calls are made from a component, the remaining ones should wait until one call finishes before proceedi ...

javascriptvue.js

Tips for updating content on hover

I have been experimenting with this idea and initially thought it would be a simple task. My goal is to hover over the 'NEW' label and change its content to 'ADD' using only CSS. body{ font-family: Arial, Helvetica, sans-serif; } ...

htmlcss

Using Node.js to convert a file name to a timestamp

I need to change a filename into a timestamp in my Laravel application. let test = "/2020-05-16_11-17-47_UTC_1.jpg" I attempted using split and join to replace the -, but I don't believe it's the most efficient method. The desired output should ...

javascriptnode.js

Dealing with cascading jQuery deferred callsHere are some guidelines on

When I have a function that needs to retrieve data and return a promise, I often find myself making multiple requests one after another. This results in nested deffered calls where the last call resolves on the deferred object that the function ultimatel ...

javascriptjquerybackbone.jsjquery-deferred

Incorporating JavaScript and Alpine.js to Monitor and Log Changes in Input Range Values

I have developed a basic app that logs the input range value to the console when the range input changes. Interestingly, it works flawlessly when I slide the slider left and right with my cursor. However, when I programmatically change the value using Ja ...

javascripthtmlalpine.js

Concerns with the dimensions of HTML thumbnails

view image description here I seem to be having an issue with the size of thumbnails on my website. The problem arises when a thumbnail with a long title is displayed, as it ends up taking up more space and affecting the layout. Is there a solution to ens ...

htmlcss

Script executing single run only

I'm currently working on a side menu that slides open and closed from the left with the press of a button. I have successfully implemented the CSS and HTML code, but I am facing issues with the JavaScript. The functionality works flawlessly at first: ...

javascriptjquery

AngularJS - Organize Item Hierarchy with Separate Containers for Each Group

My goal is to incorporate a $scope variable within an AngularJS controller that has the following structure: $scope.hierarchy = { name: 'bob', selected: true, children: [ { name: 'frank' }, { name: 'spike' ...

javascripthtmlangularjs

The solution displays the image buttons, but they are not visible on my live website

I'm currently working on my online portfolio and have encountered an issue with the navigation bar. It seems to be functioning properly when I test it in Visual Studio using Google Chrome, but once I publish the site, the buttons are nowhere to be fou ...

asp.netbuttonvisual-studio-2013uiimage

Utilize the power of Request.JSON to send an HTML array as a post

I have a piece of HTML code that includes form elements: First name: <input type='text' name='first_name' value='' /><br/> Last name: <input type='text' name='last_name' value='' / ...

javascriptajaxarraysjsonmootools

Activate jqGrid's navigation bar save icon when the ondblClickRow event is triggered

After setting the jqGrid row edit on the ondblClickRow event, how can I enable the save icon on the navigation bar when a row is double clicked? ondblClickRow: function (rowid) { jQuery(this).jqGrid('editRow', rowid, true, null, null); ...

javascriptjqueryjqgrid

Issue with deleting data from database using the script

I am facing an issue with deleting records using a button on the Index webpage. I tried using jQuery with AJAX, but it does not seem to be working correctly. Here is my controller method which works fine when called from a form generated by another page u ...

jqueryasp.netajaxasp.net-mvc

Using Jest: A guide to utilizing a mocked class instance

When working on my frontend React application, I decided to use the auth0-js library for authentication purposes. This library provides the WebAuth class which I utilize in my code by creating an instance like so: import { WebAuth } from 'auth0-js&ap ...

javascripttypescripttestingjestjsauth0

How to manage access controls for the Admin Page in node.js

Hi everyone, I am facing an issue with my admin page access control on my application. I want to restrict access to all users except the one named John. In my app.js file, here is what I have: app.get('/admin', requireLogin, function(req, res){ ...

javascriptnode.js