Survey Form - background layer

In the example (https://codepen.io/freeCodeCamp/full/VPaoNP), there is a darker background layer that starts below the title/description and adds emphasis to the questions and submit button. I’m not sure what this is called, but I believe the CSS code used is:

form {
background: var(–color-darkblue-alpha);
padding: 2.5rem 0.625rem;
border-radius: 0.25rem;
}

When I try to add this background layer using this CSS code, nothing happens. I would appreciate any thoughts or help with this. Here is my survey form: https://codepen.io/tommy-fm35/pen/MWYrRMN

You’re on the right track, I’ve had a look at your pen and am able to do it using a CSS selector you already have put in. Try a more basic variation without the CSS variable but just with a plain color, I tried black to see if it would work. 2 properties should be able to get it working with a couple more to make it look nice

1 Like

As said, remember that the color is set using custom properties (CSS variables) so you have to have that set for the color to show.

You can just set the color in the selector instead if you want.

form {
  background: rgba(96, 125, 139, 0.5);
  padding: 2.5rem 0.625rem;
  border-radius: 0.25rem;
}

Also, be aware that any properties you set in the #survey-form selector will overwrite anything set in the form selector because the selector using an id has higher specificity.

3 Likes

Thank you both! I appreciate the quick feedback and help. One more quick question:

When I applied the code, the width of the form background extended far more than I wanted. So, I narrowed this background by changing the width to 550px.

This is how I want it to look on a regular display, but my question comes when I resize the window to check to see if it is responsive, and since I have width set to 550px, it is not responsive. What are your thoughts? Is there a better way to adjust the size of this form background which would also be responsive when resizing the window? https://codepen.io/tommy-fm35/pen/MWYrRMN

Hello, tommy.

In general, it is best to set the width and height values to percentages. I recommend you do that for every single element you have set the width to a pixel value.

After that, you probably find 60% is what you are looking for for the form.

Hope this helps

1 Like

Great! thank you for your help.

I changed the width of my elements to percentages but find it interesting that I could not use the same percentage for each element. For example: name, email, and number are now set to 84%, but the dropdown had to be adjusted to 86% to visually match, input-textarea to 80%, and the submit button to 83%. Any thoughts as to why one percentage value would not work for all of my elements?

That is baffling me. I can see no reason for them to need different widths to be the same width. They have the same parent class.

The textarea should be 84% as well, but you have given it a margin. Remove the margin, centre it, and it will look the same. Same can be said for the submit button. Just make sure every element has the same padding and margin, and it will look the same.

That does not apply for the the dropdown. I am sorry I could not be of any help with that.

Okay, that helps to make sense of those elements. I will work on adjusting the padding & margins. Yes, the dropdown has continued to baffle me. I appreciate your feedback!

Adding box-sizing: border-box should fix the sizing issues. Use a universal selector at the top of the CSS.

*,
*::before,
*::after {
  box-sizing: border-box;
}

If you want the same width on all the form elements, I would suggest setting the width on the form elements to 100% and then giving the form-group container whatever width you want. You will need to set margin auto to center the elements as well.

1 Like

Thank you for your help! this solved the issues I was having with sizing and width.

I am having one last issue, and it is with the dropdown box. I haven’t been able to figure out how to format the actual dropdown menu with CSS. Right now when it is clicked, the dropdown menu and font size are both larger than I would like. Any tips w/ this would be greatly appreciated.

You can target the option element to give the text inside the dropdown a different font size.

option {
  font-size: 20px;
}

I’d also suggest you combine all the same styles you have for the form elements inside a class and use it instead of duplicating the styles in the id selectors. Note that you have to keep the ids on the elements in the HTML for the test.

I tried to target the option element to format the dropdown, and this did not work for me. I do appreciate your suggestion about combing all the same styles inside a class instead of duplicating the styles in id selectors.

Any further help with how to format the dropdown would be greatly appreciated.

Not sure why it isn’t working for you. If you add the CSS below do you not see the colors?

option {
  font-size: 20px;
  color: #4CAF50;
  background: #607D8B;
}

Can you update your Codepen with the changes so I can see them (even if not working).

I just added the CSS to my Codepen (not working) and saved it. Please check it out. I look forward to hearing back from you, and again, I appreciate your help.

I’m guessing you are on Safari? It works for me in Chrome and Firefox, but not Safari.

I know there are many difficulties and inconsistencies with styling native widgets. But I kind of thought something like the font size might be adjustable on most platforms by now, I guess not. The fact that the option element on Safari is not even inheriting the font size from the select element (as far as I can tell) seems like an accessibility issue to me.

It is crazy that you have to make a custom menu just to control the font size.

I use Chrome, not Safari. Interesting that it is working on your end. I’m not sure where to go from here, but I do appreciate your willingness to help and look at this w/ me.

Are you on macOS?

Chrome Windows:
menu-chrome

Safari (from a VM on LambdaTest):
menu-safari

Chrome macOS Mojave (from a VM on LambdaTest):
menu-chrome-MacOS

Anyway, styling this is super inconsistent. If you want something consistent cross-platform you have to make a custom menu.

Thank you for the reply! Yes, I am using Chrome macOS Mojave.

I appreciate your feedback, it’s good to know that this problem isn’t as easy to resolve for everyone, and it’s good to know that we can be seeing completely different things based on what web browser we are using.

Sorry for any inconvenience,
just wanna know how I can post a question, as I haven’t found any place for posting but reply