How do I change the background colour of dropdown currency selector?

[Anonymous]

Hi there,

I was wondering how do I go about changing the background colour of the button on the deposit page (page created using shortcode), and in addition to the button, the dropdown where users select a currency.

I have nothing in my theme that uses black as the background for buttons or dropdowns so I’m not sure where it’s picking this colour up from. Currently the background of the dropdown is black, with black text until you hover over it, then it becomes legible with white text. The same goes for the button, black button and black text, but when you hover over it the text becomes white so you can read what it says

I’ve attached a picture to demonstrate what I mean.

I’ve also tried changing this using the following CSS rule but I’ve had no success:

.dashed-slug-wallets, .dashed-slug-wallets input, .dashed-slug-wallets select, .dashed-slug-wallets textarea {
	color: #MYCOLORCHOICE;
	font-size: 12pt;
}

Attachments:

You must be logged in to view attached files.

[alexg]

Hello,

Here is some CSS code that will set the text to blue and the background to red in all input fields, including currency dropdowns and textareas:

.dashed-slug-wallets input,
.dashed-slug-wallets textarea,
.dashed-slug-wallets label.coin select,
.dashed-slug-wallets label.coin select option {
	background-color: #f00;
	color: #00f;
}

Your code for the dropdowns did not work for two reasons:
1. You likely want to apply the background to both the select element and the option element.
2. CSS rule specificity: There was already a rule for .dashed-slug-wallets label.coin select which is more specific than .dashed-slug-wallets select. In CSS, more specific rules override less specific ones. If you inspect an element with your browser’s dev console, it will tell you which CSS rules apply to the element and in what order, and also where they are coming from (i.e. theme, plugin, browser, etc). There are multiple tutorials on rule specificity on the web. For example: https://css-tricks.com/specifics-on-css-specificity/

Regarding the input[type="submit"] button and the input[type="button"] button, you can again inspect the elements with your browser. Your theme may be applying styling to html form buttons, both in their normal state and the :hover state. To override these, you will likely need to match the specificity of the rules as they are used in your theme.

For example, I was able to apply colors to the buttons like so:

.dashed-slug-wallets input[type="submit"],
.dashed-slug-wallets input[type="button"]
{
	background-color: #f00;
	color: #00f;
}

.dashed-slug-wallets input[type="submit"]:hover,
.dashed-slug-wallets input[type="button"]:hover {
	color: #ff0;
}

The above gives the buttons blue text and red background, but on hover the text turns yellow.

But if there is a theme rule starting with article input[type="submit"] it will be more specific, so you need to match that in your rule if you want to override the theme rule.

Hope this helps.

with regards

[Author]

Posts