@Merlin07 Try this in your extra.less file and change the color to suit. You may need to change the text color too if it's obscured by the background.
Code:.inputGroup.inputGroup--joined .inputGroup-text { background: yellow !important; }
.inputTypes-input:checked + .inputTypes-display,
.inputTypes-display:hover
{
color: @xf-inputTextColor;
border-color: @__borderColor;
background: linear-gradient(180deg, @xf-inputBgColor, @__tabBackground);
}
ok, i have 2.2.15
That specific area uses this CSS:
Code:.inputTypes-input:checked + .inputTypes-display, .inputTypes-display:hover { color: @xf-inputTextColor; border-color: @__borderColor; background: linear-gradient(180deg, @xf-inputBgColor, @__tabBackground); }
It essentially creates a gradient that transitions from the input background color to the content background color. If it's showing up like this, more than likely you're going to have other issues around the site. Rather than using CSS to fix specific things like this, I'd suggest going to Style properties -> Basic colors and making sure colors are properly set there first. I don't think you should be using a white input field (I'm assuming you are) on a dark background as an example. Tidy up that page first, make sure text colors don't match the backgrounds, example:
Accented content background color shouldn't be the same color as: Accented content text color (or even close, there needs to be contrast so the text can be seen)
After that, then you may need CSS adjustments if style properties don't exist.
It takes a bit to get used to it all and dark styles are especially more time consuming if not done properly from the start.
We use essential cookies to make this site work, and optional cookies to enhance your experience.