Changing the Colors of Input Elements

Ever been on a forum site with a really nice dark theme, but then you go to make a post, and are presented with a large blindingly white text area to type in? Maybe with tiny, hard to read font? Of course you have. But this is a 100% fixable problem.

Let’s say we have both a light and a dark theme, on a site that uses green as the primary emphasis/highlight/headings color. How to make your form fields work well and fit into the theme? (For hints on how to code your site to let users easily switch between light and dark themes, see my other posts.)

Background and text colors

This is the basic one that most people can figure out, though there are a few extra tricks I’d like to mention.

input, textarea, select, button {
   border: 1px solid black;
   background-color: #444;
   color: #999;
   /* setting any styles on input elements removes all OS-based default styles, so if we want to go back to a nice modern look, we have to round things out again ourselves */
   border-radius: 0.5em;
   padding: 0.25em 0.5em;
}

You might notice – depending on if you are basing your changes on someone else’s theme – if you just use the above, that the select box uses these colors, but when it opens, the options doesn’t. Options can have their own colors, like so:

select option {
    background-color: black;
}

You might also notice that it doesn’t affect radio buttons or checkboxes, nor the ‘hover’ color on select menus. Blame the spammers – the browser companies decided that allowing people to change those colors made it too easy to trick people into submitting forms with values they didn’t intend, and end up agreeing to terms or purchasing add-on items that they didn’t want to. HOWEVER! you can still use filters, including hue-rotate, on checkboxes and radio buttons. You don’t want to use hue-rotate directly, because the base color can be different for different users, depending on their desktop theme colors, but that’s where grayscale and sepia come in.

Here’s an olive green for checkboxes & radio buttons:

input[type=radio], input[type=checkbox] {
    filter: grayscale() sepia() hue-rotate(90deg);
}

As for the hover highlight on select menus, or the ‘choose file’ button on file uploads, you’re out of luck with CSS so far as I’ve been able to tell. Javascript can do almost anything – but in this case it would involve hiding the actual element entirely, creating a dummy element out of divs etc that looks like an form element, and then using some other tricks to push the user input back to to the actual form element, and I really can’t recommend it.

Cursors and Placeholders

Okay, technically it’s called a “text carat”. Anyway, don’t go crazy with this one, but it’s pretty useful to have the cursor more visible if you’ve otherwise got relatively low contrast

input,
textarea {
color: white; /* cursor color */
text-shadow: 0px 0px 0px #999; /* text color */
-webkit-text-fill-color: transparent;
text-fill: transparent
}

By default, placeholder text is a lighter gray than text a user has actually entered, so that it’s obvious that it’s not ‘real’. If you’re changing the foreground color of input elements, you might loose that, or maybe you just want something that matches your theme.

input:placeholder-shown,
textarea:placeholder-shown {
    color: #86bd9c; /*placeholder text color*/
    text-shadow: 0px 0px 0px #86bd9c; /* placeholder text color if you're using the cursor trick */
}

Here it is with all of the above applied

[wpforms id=”27″ title=”false”]