Changing the color of a text box when it is disabled can be achieved through JavaScript

I'm facing an issue with the formatting of my HTML elements. Specifically, I have 2 combo boxes and one text box in which all 3 are disabled. However, when they are disabled, the background color of the text box does not match that of the combo boxes. I attempted to solve this problem by using the CSS code below.

<head>
  <style>
     input:enabled
     {
       background:#ffff00;
     }
     input:disabled
     {
       background:#dddddd;
     }
   </style>
</head>

Answer №1

When incorporating <select> elements, it is important to include select in every CSS selector:

input:enabled, select:enabled
{
background:#ffff00;
}
input:disabled, select:disabled
{
background:#dddddd;
}

Answer №2

Styles have been assigned specifically for input fields and selects in the CSS. However, since the combo-box utilizes the select tag, it is necessary to also specify a style for the select tag.

To achieve the desired outcome, you can define a style for select:disabled.

input:disabled, select:disabled {
    background:#dddddd;
}

For further clarification, refer to this concise example showcased on jsfiddle:

http://jsfiddle.net/SZz4F/

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 store a downloaded video from the server?

I am currently in the process of downloading a video from a server using JavaScript XHR (specifically Angular $http GET with response type 'blob'). My question is, how can I save this downloaded video to a Chrome application's local storage ...

Resolving parent routes in Angular 2

I am encountering an issue with my code. The 'new' route is a child route for the 'users' route. The 'users' route has a resolver, and everything works fine up to this point. However, after successfully creating a new user, ...

How can I access the result of a getJSON promise within the $.when method?

I am working on a piece of code where I aim to collect data from 2 getjson calls and store it in an array only when both calls have successfully completed. However, I encountered the following error: resultFromUrl1.feed is undefined var entry1 = resultFro ...

Alter the background image of a DIV based on the selected menu item

I am working on a project that involves a div element with the class "jumbotron" which currently has a background image applied to it. Additionally, I have a menu consisting of 6 items that I would like to interact with. My goal is to dynamically change ...

What is the best way to generate a fresh set of data from a search parameter?

I have received data from an API call that needs to be filtered. I am utilizing Redux instead of local state for this task. Below are the actions I have defined: import ActionTypes from '../constants/ActionTypes'; export const passengersDataAc ...

Access a JSON response within an HTML/JavaScript document

Can the scenario below be achieved? Here is the ajax response I received: HTML <body> <input type="text"></input> <div id="trydiv"></div> </body> JS $.ajax({ type: "POST", url: "json.php", ...

Explore the associative array within a JSON using jQuery to extract and manipulate the values within the array

I'm working with a JSON file containing surnames and first names in an array, along with other objects. How can I specifically extract the names "Jhon" and "Jason"? Below is a snippet from my JSON file: [{ "surname": "Vlad", "first_name": [ ...

Using JavaScript to enhance event handling for a `select` element in a progressive manner

I have an advanced <select> element in my HTML. It is structured like this: <ul> <li></li> <li></li> ... </ul> In the current setup, a click event handler is attached to each individual li element. If the ...

What steps can I take to address the issue of missing @angular/Core modules?

I am encountering an issue with running my Angular 2 project. Here's what I have tried: - Attempted to run the project using npm install and npm start, but it did not work - Cloned a quickstart from Github and replaced it with my src folder, only to ...

Access a document from a collaborative directory directly in a web browser

When I paste the shared path for a PDF file into the address bar, it opens perfectly in all browsers. The code below works fine in IE 8 but not in Chrome and Firefox. Code: function openPDF(file) { window.open(file, '_blank'); } function link ...

Modify information on the user interface without the need to refresh the page

Is there a way to update data on the UI without having to refresh the screen in a web application built with Node.js? I'm looking to make only specific changes on the screen. Additionally, how can I ensure that the data displayed on the screen is upda ...

Having trouble compiling for IOS using a bare Expo app? You may encounter an error message that reads "Build input file cannot be found."

Encountering Error When Running react-native run-ios on Bare Expo App I am experiencing an issue while trying to run the 'react-native run-ios' command on my Bare expo app. The error message I am receiving is: "Build input file cannot be found: ...

Node.js utilized for conducting anti-virus scans on server-bound files prior to uploading

Is there a way for me to scan files that are submitted as request payloads to check if they contain potential viruses? For example, if someone tries to upload a txt file with the EICAR virus signature, I want to be able to scan it and reject it if it is in ...

JavaScript fails to function properly on FireFox

I'm currently troubleshooting a script that works in Chrome but not in FireFox. I suspect it's due to the webkit syntax, so I tried converting it to a standard gradient without success. Can you help me identify what's causing the issue? Web ...

Validate input JQuery only when specific radio buttons are chosen

My form currently has basic validation set up like this: <script type="text/javascript"> $(function() { $("#postform").validate({ rules: { ...

What is the best way to save high-resolution images created with HTML5 canvas?

Currently, there is a JavaScript script being used to load and manipulate images using the fabricjs library. The canvas dimensions are set to 600x350 pixels. When smaller images are uploaded onto the canvas and saved as a file on disk, everything works c ...

Adjust the size of the frame by dragging the mouse cursor to change both the width

I'm a bit lost on where to direct this question, so I decided to include the html, web, and css categories (though I suspect it's related to css). The task at hand involves creating an html page with a fixed header, while the content area compris ...

Tips for incorporating images as radio buttons

Can anyone assist me in setting up a straightforward enabled/disabled radio button grouping on my form? My idea is to utilize an image of a check mark for the enabled option and an X for disabled. I would like the unselected element to appear grayed out ...

Start from scratch when establishing the baseline for "defaults."

Struggling to reimagine the _.defaults function from underscore.js, I keep encountering this pesky error: Error message: should copy source properties to undefined properties in the destination object‣ AssertionError: expected { a: 'existing' ...

Can the value of the currently selected option in a select box be obtained without needing to submit the form?

I'm currently working on a project and facing a roadblock with the following task: My goal is to extract the selected value from a dropdown menu and utilize it in my PHP script. The challenge here lies in capturing the chosen option without requirin ...