What is the method to adjust the color of items within a <select> dropdown menu?

Feeling stuck with a real problem! I have no clue how to solve it... Is it even possible? I want the text in this menu to be white:

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

This is my code:

<select id="addRow-fieldType" style="margin-top: 10px; width: 180px; ">
    <option value="null">NUMBER</option>
    <option value="2">CHAR(32)</option>
    <option value="3">DATE</option>
    <option value="4">VARCHAR</option>
    <option value="5">BLOB</option>
</select>

Answer №1

Here is a suggestion for you to try:

select option {
  margin: 40px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

select option[value="1"] {
  background: rgba(100, 100, 100, 0.3);
}

select option[value="2"] {
  background: rgba(150, 150, 150, 0.3);
}

select option[value="3"] {
  background: rgba(200, 200, 200, 0.3);
}

select option[value="4"] {
  background: rgba(250, 250, 250, 0.3);
}
<select id="addRow-fieldType" style="margin-top: 10px; width: 180px; ">
    <option value="null">NUMBER</option>
    <option value="2">CHAR(32)</option>
    <option value="3">DATE</option>
    <option value="4">VARCHAR</option>
    <option value="5">BLOB</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

Is there a way for me to incorporate form data into a JSON GET request upon submission?

I am currently working on a form that allows users to input airport information. Here is the code for my form: <form id="myForm" > <div> <label for="airport">Airport:</label> <input ty ...

Custom input boxes in AngularJS for unique validation method

I've recently implemented some new custom input boxes, which you can check out here. However, I'm facing an issue with the validation that used to work perfectly fine. My goal is to have the line turn red when there's a validation problem, ...

Transforming Button style in jQuery Mobile version 1.3.0

There are reports of a new function in jQuery Mobile 1.3.0 that allows for dynamically changing button themes using JavaScript: http://jquerymobile.com/blog/2013/02/20/jquery-mobile-1-3-0-released/ However, upon attempting to run the provided code snippe ...

Sorting options tailored for arrays within arrays

Here is an array with nested arrays: var array = [ ['201', 'Tom', 'EES', 'California'], ['189', 'Charlie', 'EE', 'New Jersey'], ['245', 'Lisa', ' ...

Tips on how to round a whole number to the closest hundred using Javascript

Suppose there is a numerical value given let x = 890 and the objective is to round it off to 900. If the number is 820, then it should be rounded to 800. We can safely assume that the input number (x) will always be an integer. While manually checking ...

Can a webpage be sent to a particular Chromecast device without using the extension through programming?

My organization has strategically placed multiple Chromecasts across our facility, each dedicated to displaying a different webpage based on its location. Within my database, I maintain a record of the Chromecast names and their corresponding URLs. These d ...

How to use the transform function in JavaScript

Hey there, I'm looking to create a new function. I am just starting out with javascript. I want to wrap the code below in a function like: ConfirmDelete() { }; This function should perform the same action as this code snippet: $('.btn-danger ...

The callback within the Q.all promise is never executed

I am a bit confused about the functioning of `Q.all`. Below is a code snippet I have written (jsfiddle): function callUrl(remoteEndPoint){ return $.ajax({ url: remoteEndPoint, method: "GET", dataType: "json", contentType: "application/js ...

I struggle with managing a z-index in conjunction with an absolute position

Check out this codesandbox to see the issue where the 3 dots button is displayed over the menu. Click on the 3 dots to understand the problem. Below is the CSS code for the menu: .more-menu { position: absolute; top: 100%; z-index: 900; float: l ...

JavaScript does not allow the use of variables outside of functions

As someone diving into the world of Javascript after working extensively with server-side languages like PHP, I've noticed a peculiar issue. It seems that I am unable to access variables defined outside of a function from within the function itself. T ...

"Achieving Alignment: Placing a Div Element Inside an H

I am in the process of building a portfolio for freecodecamp, but I am having trouble with centering the button and row div on the page. The row div is necessary because I will be adding more buttons later on, but for now I just need the FCC button. Below ...

The variable 'form' has not been assigned an initial value in the constructor of the property

Below is the snippet from my component.ts file: import { Component, OnInit } from '@angular/core'; import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms'; @Component({ selector: 'app-license', te ...

Encoding a string in JSON that contains the "#" symbol along with other special characters

The client side javascript code I have is as follows: <html> <script type="text/javascript" src="js/jquery.min.js"></script> <script> $(document).ready(function() { //var parameters = "a=" + JSON.stringify( ...

Retrieve information from the API prior to rendering the controller components

Hello there! I am looking to retrieve data from a factory before any of my controllers are loaded. After some research, I discovered that it can be achieved using the resolve function in AngularJS: angular.module('agent', ['ngRoute',&a ...

It is likely that the variable is out of scope and is undefined

I have a piece of code that retrieves the description of a word in JSON format from website, which is provided by the user in the request JSON body. The issue I'm facing is that I am unable to send back the 'desc' variable in the res.send ...

Parallax Materialize fails to initialize

Despite my efforts to initialize the code, I am still unable to display the images. I've only been coding for two days, so I'm clueless about what else could be causing this issue. Here is the current state of my code. Thank you in advance! < ...

After the upgrade from Angular 5.2 to Angular 6, Bootstrap 4 dropdown and Bootstrap-select dropdown seem to have lost their dropdown functionality. This issue arose after updating to Bootstrap 4 and jquery

Update: Upon further investigation, I experimented with a standard Bootstrap 4 dropdown and encountered the same issue – it would not open. This leads me to believe that the problem may not be specific to the selectpicker class or the bootstrap-select de ...

Trouble locating the elusive element with Selenium

Currently, I am working on creating a framework that involves determining whether a web element is hidden before executing any actions on it. One specific scenario involves a password field that is structured like so: <div class=hidepassword> < ...

Using VueJS to determine if a certain string includes a specific substring within an if-statement embedded within a v

I am aiming to verify if the link in a json object contains 'http'. If it does, I want to assign a target='_blank' attribute to the v-btn. The link could also be something like #test. Currently, this is how I am attempting to achieve i ...

What is the process of importing a JSON data file and utilizing it within a React component?

As a beginner in React, I am struggling with the concepts of importing, exporting, and rendering components. I have a fakeData.json file within the same src/components folder as the component I want to render. Let's take a look at the structure: < ...