Need some help with input field colors

[RamiLT]

So, I’ve been trying to build the Survey Form Project and while it’s still not finished, I found someting that i can’t seem to fix. I managed to customize the color of the select input fields, but when I try to apply the same color to the Name, Email and Age input fields, the color doesn’t change. I don’t know why it happens that way (and I wasn’t able to find where that color is coming from either, I think it’s the default setting).

Another question is about the color of the selected options in the select field. I have 2 of these, and the color of the selected item is different. Is it a defult setting, and, if it is, can I change it?

Here’s my project

FCC Survey Form

[SiriusHP]

I’m not sure of what you’re trying to do. Do you want to change the color of the input field? The color you applied to them does work if this is it:

color: var(--color-mainblue);

but the color property refers to text so it changes the color of the text in the input field to your color.
If you want to change the color of the input fields, try the background property on them.

For the select element, if you’re talking about ‘Please select an option’, it seems to be because it’s disabled:
<option selected disabled value>

After doing some research, I found something that seems to work:

select option:disabled {
color: 
background:
}

but it’s still grayed out when you open the dropdown, before you hover on another option.

[RamiLT]

Hey, thanks for answering!

This fixes “Please select an option” dropdown box. It now works the way I thought it should. However, the first issue (which I should have explained better) still persists. I want to change the text inside the Name, Email and Age input fields (where it reads “Enter your name here” for example), but adding that line with the color isn’t changing the placeholder text’s color, and that’s why I’m so confused. Like, when you type inside these fields, the font color is blue as it should, but the actual placeholder text isn’t, and I wanted it to be blue as well.

[SiriusHP]

I see.
Well, this is what I found:
::placeholder{color:red;}

[RamiLT]

Ah! Now it works! Thank you so much for your help, I was really confused and was having a hard time trying to figure this one out.

[RamiLT]

So, the survey form is almost finished. However, there’s stil one thing I can’t figure out: I can’t find a way to properly align my radio buttons and checkboxes with their respective labels.

FCC Survey Form

[LucLH]

You can remove your display property for your radio.

.input-radio,
.checkboxes {
   /* display: block; */
   margin-right: 1rem;
   min-height: 1.3rem;
   min-width: 1.3rem;
   cursor: pointer;  
}

It will align your radio buttons (and then checkboxes) on the same line. You can add into your HTML the tag br.

Example of use:

<p class="questionlabel">Would you recommend our store to a friend?</p>
<label for="yes" class="label">
  <input type="radio" id="yes" name="recommend" value="Yes" checked class="input-radio"> Yes
</label><br />

This is one way to do, you have many possibilities.