Update the background color when a selectable option is chosen and not disabled

I am searching for a solution to modify the color of a select box if one of the disabled options is not chosen.

Here is an example of the dropdown:

    <select class="selectoption" name="desc[]">
        <option disabled="disabled" selected="selected">Select option...</option>
        <option value="1">Option 1</option>
    </select>

Is there a way to change the background color of this select box if the disabled option remains unselected?

Currently, the background color is set to #333 and changes to another color once an option is selected by the user.

I have successfully implemented a similar feature using checkboxes through:

checkbox:checked

Thank you in advance for your help!

javascriptjquerycssforms

Answer №1

Incorporating JavaScript is a viable option to address the issue, as it allows for checking the selected option based on its value.

HTML:

<select id="selection1" class="chooseoption" name="description[]">
    <option disabled="disabled" selected="selected">Choose an option...</option>
    <option value="1">Option 1</option>
</select>

JavaScript:

document.getElementById("selection1").onchange = function() {
    if(this.value != null && this.value !== undefined)
    {
        this.className = "customclass";
    }
};

CSS:

select.customclass
{
    background-color: blue;
}

http://jsfiddle.net/awAwA/

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

When attempting to utilize putImageData on the HTML5 canvas context, an error occurs stating that the overload resolution has failed

While following the MDN canvas tutorial, I encountered an issue with a code snippet I wrote. The code is supposed to color the top left corner (50x50 pixels) of the canvas in red. However, I'm receiving an error message that says Overload resolution ...

javascripthtml5-canvas

Attempt to import Recharts into React was unsuccessful

I am currently exploring the use of recharts in a React project, but I am facing difficulties when trying to import components from its library. I have added it to my package.json file as follows: "recharts": "^2.0.9", However, I am ...

javascriptreactjsrecharts

How come the width property is not being applied in my media query?

This issue is new to me. I am facing difficulty modifying the width in my media query. Interestingly, in the developer tools, the width appears crossed out, as if I toggled it off, but that's not the case; it's the default setting. All I want to ...

htmlcssmedia-queries

The request for an advertisement was successful, however, no ad could be displayed as there was insufficient ad inventory available. Please handle the situation appropriately with the

Using react-native, I am trying to incorporate ads into my app but encountering an error. Despite attempting various solutions, nothing seems to work. It appears that the issue may lie with the AdMob Android SDK. While I have reviewed SDK videos related to ...

javascriptandroidreact-nativeadmob

breaking up various dates into specific formatting using React

I need to convert a series of dates Wed Nov 13 2019 00:00:00 GMT+0000 (UTC),Tue Nov 19 2019 00:00:00 GMT+0000 (UTC),Tue Nov 19 2019 00:00:00 GMT+0000 (UTC) into the format 11/13/2019, 11/19/2019, 11/19/2019 ...

javascriptreactjsmomentjs

What makes Next.js API so special?

As I delve into Next.js, I find myself grappling with the concept of server-side rendering (SSR) and API usage. When is it appropriate to utilize the API folder within pages versus deploying my own server along with a database? Would there be any conflic ...

javascriptreactjsfrontendnext.jsserver-side-rendering

Working with Closure in Node.js

After encountering issues with nested for loops, I decided to explore closures as an alternative solution. Below is the basic structure of my previous code: // First for loop for(data) { connection.query(records as per data) if(!error) { ...

javascriptnode.jsclosures

Designing a webpage with CSS to include an offset

I've been struggling to adjust this HTML by 300 pixels vertically and horizontally, without any luck. If you have any resources or tips on how to achieve this, I would greatly appreciate it. I already have three frames in place, and I'm attemptin ...

htmlcssframeoffset

Implementing the Jssor slider

Recently, I've been using the jssor slider on multiple pages without any issues. However, I am now facing some challenges. Ideally, I want the slider to be hidden initially and then displayed with another script. While I have managed to achieve this v ...

javascriptjquerytwitter-bootstrapsliderjssor

The jQuery hover function is not functioning properly on page load in Firefox

While this code is functioning smoothly in Chrome and IE, it seems to be encountering issues in Firefox! <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> JS: $(window).load(function(){ $("#bosti ...

javascriptjquerycss

Ways to achieve an arched shadow effect for an image using React and Tailwind CSS?

Looking to add a unique touch to my React project with a shadow effect resembling an arch shape at the top of an image using Tailwind CSS. The ultimate goal is to create a semi-transparent arch-shaped shadow covering the top portion of the image, similar t ...

cssreactjsnext.jstailwind-css

Utilizing AJAX for autocomplete in HTML and inserting it into a page using innerHTML is causing issues with the functionality of forms on the website

As I work on developing my website, I am facing an issue with nesting HTML code generated by a PHP page using Ajax innerHTML. While the PHP-generated page loads successfully, it appears modified compared to how I want it to be uploaded. The main problem li ...

phpjqueryhtmlajaxforms

Leveraging Amplify for offline storage while transitioning between HTTP and HTTPS protocols

Recently, I encountered an issue with Amplify 1.0a1 on my website. It seems that when storing the value of prod_id in localStorage on a page using HTTP, and then navigating to a page using HTTPS (such as the 'list' page), I am unable to access th ...

javascriptjqueryhttpslocal-storageamplifyjs

Exploring the integration of react-leaflet with Nextjs: A step-by-step guide

Hello everyone, I'm currently facing an issue while trying to integrate a Leaflet map into my Next.js application. The error window is not defined keeps popping up and despite searching on stackoverflow, I haven't found a solution yet. The code ...

javascriptreactjsnext.jsleafletreact-leaflet

Hey there everyone, I was wondering how to send both single and multiple values to a database using JavaScript and JSON endpoints with a Spring Web API

{ "id": 178, "stockin_date": "2022-11-15T08:18:54.252+00:00", "effective_date": null, "expired_date": null, "create_date": null, "update_date&q ...

javascriptjsonajaxspringapi

Website Responsiveness - inquiries for all needs

My first responsive website project has hit a roadblock, as I struggle to understand how to implement media queries effectively. Here's a snippet of my code... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/x ...

cssmedia-queries

How to utilize View as a substitute for the div tag in your Web Project

Undoubtedly, when working on a web project, it is common practice to use the div element like this: <div> sample text </div> However, using div in React Native can lead to errors: <View> sample text </View> Is there a way to ...

javascriptreactjsreact-native

Adjusting the transparency level of the JavaScript thumbnail

I have implemented a plugin to showcase an image carousel on my website. The navigation thumbnails in the carousel are currently set to appear "greyed out" when not selected. Is there a way to adjust the level of grey for these thumbnails? Check out the l ...

javascriptjquerycssplugins

The function appears to be failing to execute

I'm currently working on a dynamic search bar using AJAX to retrieve results from a database. I've noticed that when I check in the debugger, the code isn't triggering the handleSuggest() function which is responsible for updating the inner ...

javascriptajaxsearchdynamic

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute

Here is the code snippet of my component: <template> <div id="something" class="card"> </div> </template> const height = 200; const width = 200; let graph = d3 .select('#something') .append('svg') ...

javascriptcssvue.jsd3.jssvg