How to Style Checkboxes

#1

Hi everyone, I have two small issues with my Survey page that I cannot solve.

  1. can someone help me understand why the label of the checkbox is not inline with the Text associated with the label ?

  2. Can someone help me understand why the text-area does not span the whole div labeled input-field ?

Here is a link to the Pen Survey Form

#2

Hello there.

  1. Having the inputs inside the labels is making it difficult to align properly. I would have the label first, then the corresponding input.
  2. You have absolutely no CSS targeting the text-area. So, why would it span the whole div? Add some CSS controlling the width of the #comments text-area.

Lastly, you can just use the * selector for that “START CSS RESET” you have.

Hope this helps

1 Like
#3

Hi Sky, thanks for the tip. I was able to target the comment text-area.

However, having the label first followed by the corresponding input does not align the label and the input on the same line. The two are still on different lines.

Perhaps it’s my choice of styling.

.form-details input[type="checkbox"] {
    display: block;
  }
  .labels {
    display: block;
    font-family: inherit;
    margin-bottom: 6px;
  }

That’s what I have targeting the labels and the checkboxes inside the labels.

#4

To supplement @Sky020, I have noticed so many issues with your code. You have to clean it:

  • Codepen doesn’t require you to include <head> </head> , <html> </html> or <body> </body> tags in your html. They are included behind the scenes for you Check Their Documentation Here
  • You are enclosing label and its corresponding inputs in separate divs. divs are block elements. I suggest enclose an input element in its corresponding label element and remove the divs enclosing them in the form.
  • You are applying display: block on an element and width: 100% at the same time. A block element will always take up the width of the entire container.
  • When doing a reset of padding and margin it is not necessary to type names of all tag elements in the document to do it. simply select everything using an asterisk (*) and apply the reset.
    *{   } //Selects everything
  • Finally i suggest after enclosing an input element in its corresponding label like this
 <label id="name-label" for="name"> Name
           <input type="text" class="input-field" id="name" placeholder="Enter your name" required >
        
  </label>

apply display flex on the label and make the width of the input 100% like

       #name-label {
                   display:flex;
                   }
        .input-field {
                     width: 100%;
                      }

I hope that helps

#5

Hi Nibble, I will work on the suggested edits today and clean up the messy code. Thanks alot

#6

Hi Nibble, I cleaned up the code as suggested. Thanks for the tip on display: block and width: 100%

However, the checkboxes still won’t line up as I would like on the left. Maybe you have a tip on how to get that to work?

Here is a link to the cleaned up code https://codepen.io/Benmuiruri/full/qBObzRQ

#7

Apply display flex on the label and input field containers. Eg Below is one of the form elements. I applied an additional class name-container to the container div

<div class="form-details  name-container ">
      <label class="labels" id="name-label" for="name">Name </label>
      <input type="text" class="input-field" id="name" placeholder="Enter your name" required />
  </div>

apply display: flex to the container element.

     .name-container{ display: flex; }

For the label and input field to appear on a horizontal line make sure to remove the unnecessary paddings.

#8