[SOLVED] Post "Build a survey form" test

HTML-CSS
1

hello!
i completed the first test and was trying to “style” it a bit.
however, there were a couple of things i wasn’t able to do:

  • lower the transparency of the background image of the page; :ok:
  • having the first option of the dropdown selectable, but disabled; :ok:
  • push/line up radio and checkbox on the left side of the form. :ok:

Click here for the code on codepen!

i’m using Brave
Version 1.42.97 Chromium: 104.0.5112.102 (Official Build) (64-bit)

and the challenge is Survey Form.

hope someone would be able to help. :smiling_face:

3

by definition, a disabled option cannot be selected.
Maybe you can explain why you want to do that?

also, try sharing your code from somewhere like codepen or repl.it so that it is easy to discuss your goals when we can see your work live.

4

i’ve uploaded the code on codepen (even if there now it looks more “broken” then on freecodecamp lol).
thank you for telling me that.

so, maybe it’s not “disabled” what i need.
i just want the first option for be a placeholder for the dropdown selection, but want it to be non-clickable once the dropdown is open.
do i make sense?

5

Sure. That is the placeholder attribute. (And you can use that attribute with disabled and selected initially I think). Reference: HTML input placeholder Attribute

I will take a look at codepen at some point today. You may want to make sure you set up the specific pen to pull in whatever resources it needs to work.

Also for the opacity question please see this ref Transparent Background – Image Opacity in CSS and HTML

And for the last part of your question, I believe you need to make the text of the inputs line up on the left (with less space between the radio button and the related word). For this, try moving the label element so it is on the right-hand-side of the input element (at the moment you have input nested inside label). Then following that (when the label is on right such that the text is the only thing nested in it), set the “for” attribute inside the label to point to the specific “id “ attribute of the relative input box (so create a unique id for each input box to manage that). Alternatively, you can set the width of the labels (without changing any html) to something like “fit-content” and I believe that will shrink them down.

1 Like
6

i actually didn’t need the placeholder, but just to select it and disable it.

the examples shown here are for image as a background for a specific element, not the whole page. but probably i could try a deeper research later.

update: i found someone doing it by using this piece of code:

body::after {
  content: "";
  background: url(https://i.pinimg.com/736x/f2/7c/28/f27c289b74e1a37ed8999eaca871ec1a.jpg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: fixed;
  z-index: -1;

not really sure what it is, i just barely touched the :after thingy with the last class, but, well, id did the trick. :smiley:

i tried the latter thing you suggested and didn’t really work.
later on, when i have time, i will try your first suggestion.

thank you very much for the help! :smile:

7

i’m unable to style those two.
neither of your advice seemed to work, unless it was me doing something wrong.
if someone could join in it would be great,otherwise i thinki’ve already spent enough time on that. :sweat_smile:

8

You don’t have to make the .tick into 45% as that would make the tick box block element wide.

image

I know what you are trying to do here: Inputs and Texts are by default an inline element and by making the .tick box wide it pushes the next item down the line.

However this can also be done using <br> as folllows:

      <fieldset>
        <label>What would you like us to improve? <br>
          <input class="tick" type="checkbox" value="blood" /> Sacrifices <br>
          <input class="tick" type="checkbox" value="ritual" /> Rituals <br>
          <input class="tick" type="checkbox" value="ingredient" /> Ingredients <br>
          <input class="tick" type="checkbox" value="tool" /> Tools <br>
          <input class="tick" type="checkbox" value="beast" /> Companions <br>
          <input class="tick" type="checkbox" value="temple" /> Temples <br>
          <input class="tick" type="checkbox" value="other-2" /> Other (describe below) <br>
        </label>
      </fieldset>

with the CSS

.tick {
  padding: 5px;
  margin: 5px 5px 5px 10px;
/*   width: 45%; */
}

If you want greater flexibility, try enclosing each item in a div element like so (using the same css)

      <fieldset>
        <label>Would you join our coven indefinitely?
          <div class="radio-item">
            <input class="tick" type="radio" value="join" name="join" />
            Yes
          </div>
          <div class="radio-item">
            <input class="tick" type="radio" value="join" name="join" />
            No
          </div>
          <div class="radio-item">
            <input class="tick" type="radio" value="join" name="join" />
            Yes, but not forever
          </div>
        </label>
      </fieldset>

This will make each item a div which is by default a block element so they take up space at 100% width without making it in the middle.

image

This way you can customize the positioning or the padding of each item.

Try reading more about display:block and display:inline

Hope this helps :slight_smile:

1 Like
9

that was great!
thank you very much for your help and clarifications.
i’ve actually learnt (better) a couple of things through this.
sending you much love and solidarity. :heart:

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.