Change the Color of Entered Text

replied on January 28, 2021

add !important, your selector just isn't specific enough to override the built-in styling.

color: red !important;

0 0

View 6 previous replies

replied on January 28, 2021

I added !important to the coding and it did not work

0 0

replied on January 28, 2021 • Show version history

You're also missing the quotation marks around "text"

input[type="text"]

I just double checked and that's the real problem. You might not even need !important

The value portion of an attribute selector is always supposed to be in quotes

CSS Attribute Selector (w3schools.com)

1 0

replied on January 29, 2021

Unfortunately it still did not change the color to red when I typed "". I tried without !important and with !important to double check with the "text".

0 0

replied on January 29, 2021

Can you provide the full CSS you have on the form? Something about your CSS is causing the issue because I've tested and confirmed that works.

At this point it sounds like something is causing it not to apply at all, so it could be another syntax error somewhere in the CSS.

0 0

replied on January 29, 2021

I agree, that there is something else that is causing the issue. Here is what our CSS is currently:

These three are working fine

.TwoPerLine{display:inline-block;width:47%;}
.ThreePerLine{display:inline-block;width:29%;}
#q2 input[type=checkbox]:checked + label {color: red};

These two do not work
#q170 input[type=checkbox]:checked + label {color: red};
#q3 input[typed="text"] { color: red; }

#q3 is the one that I keep changing around to get it to work. Not sure why #q170 is not working fully either when #q2 is the same coding

0 0

replied on January 29, 2021

I can see a couple problems with that CSS

type=checkbox should be type="checkbox" with quotes. Remember, CSS syntax requires that attribute selector values always have quotes.
You have the semicolon after the closing bracket for #q2 and #q170 instead of inside the bracket after red. A syntax error like this could cause everything that follows to be affected and not work either.

0 0

replied on January 29, 2021

I changed the CSS line to the above and it is working with the other checkbox's but the text still won't turn red for #q3

#q2 input[type="checkbox"]:checked + label {color: red}-WORKING
#q170 input[type="checkbox"]:checked + label {color: red}-WORKING

#q3 input[typed="text"] {color: red}

0 0

replied on January 29, 2021

I got it to finally work with the following coding

#q3 input {font-size: 12px !important; color: red}

Thank you for your help!

0 0

replied on January 29, 2021

You're missing a semicolon after "red" on all of them.

And you have "typed" instead of "type" for the last one.

If all three are just doing the same thing for the color, you can include all of the selectors separated by a command use one block of styling too.

#q2 input[type="checkbox"]:checked + label,
#q170 input[type="checkbox"]:checked + label,
#q3 input[type="text"] {
    color: red;
}

The most common issue with CSS are typos and syntax errors, so any time you have a problem like this, always double check your spelling and syntax.

9 times out of 10 when something doesn't work for me, it is because I misspelled a class name, missed a bracket, or some other minor thing like that.

1 0

Question

Question

Change the Color of Entered Text

Replies

Sign in to reply to this post.