Problem width Radio Buttons and Checkbox - Survey Form

Hi everyone,

I’m currently making my survey form for the Free Code Camp HTML/CSS project. However, as I’ve been making this web page for some reason radio buttons, as well as checkbox, disappear . The buttons appeared on HTML but now I cannot find them. This is the last test that still i couldn´t pass.
Here is the codepen :

I really hope you can help me. Sorry for my English.

Thanks!!

Your code so far****

the error is in the css when you style the input:

input {
    font-size: 15px;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 15px;
    background: none;
    border: 1px solid #a0b3b0;
    color: #c1bdba;
}

to style text input fields you styled all the inputs,
and setting height: 100%,
the radio are not showed because parent container height is equal to 0,
to style only text inputs use a class or use: input[type=text]{ }

2 Likes

Sorry for my english too! :rofl:

1 Like

Hi @saraeolivera and @miguelgiacobbe

You will finish by hate me @miguelgiacobbe haha! The height of the parent container will be set at auto if there is no size specified (default value), plus in setting the size at 100% for both width and width for each input means that each input should take all the space in the container, but there are other elements inside the container. So it create a bug. If you try to set up only the width, it will work because there is a specific size for the container width, and they are set up as block. Do you agree with that?

@saraeolivera in doing your style for the input tags, what did you want to style exactly? The little squares and rounds that represent the checkboxes and radio buttons or the text of them?

1 Like

You have a good English :+1:

1 Like

Probably freeCodeCamp will kick me out for disinformation!
:disappointed_relieved:
Thank you to reviewing my answers!!

Not at all, we need you here! It was in reading you I interpreted, that’s why I ask you if you agree. Even maybe when you said 0 in your mind it just means it starts from 0. You are giving infos no disinformations. Even what I said is maybe wrong according to another dev. :wink:

thanks,
See you next in the forum!

1 Like

Hi! @LucLH ! Thanks for helping me. I did not want to style the squares neither the rounds of the radio buttons. I just wanted to style the inputs that are above checkpoints and radio buttons but, somehow, the style I gave affected all.

I really appreciate your help.

You’re really welcome @saraeolivera! You mean the label texts of each radio/checkbox right?

If it is the text part, you should apply the style for the label tags. When you try to change the input tags style, you are working on the squares or rounds beside the text, so not the text directly.

I meant the labe "name"m “age” and “number”. What i did now is a div to style these three. Now radio and checkboxes are shown but under the question and not side by side.

I

1 Like

I think the radio should be inside the label…

2 Likes

I have already solved the problem! (it took me a while) Thank you guys for the help!!

Here is the result:

2 Likes

Perfect @saraeolivera, it was on the label you had to work. Congrats for your project :wink:

1 Like