<label>What would you like to see improved? <label >(Check all that apply)</label>
                            <input value="1" type="checkbox">Front-end Projects</input>
                            <input value="2" type="checkbox">Back-end Projects</input>
                            <input value="3" type="checkbox">Data Visualization</input>
                            <input value="4" type="checkbox">Challenges</input>
                            <input value="5" type="checkbox">Open Source Community</input>
                            <input value="6" type="checkbox">Gitter help rooms</input>
                            <input value="7" type="checkbox">Videos</input>
                            <input value="10" type="checkbox">City Meetups</input>
                            <input value="11" type="checkbox">Wiki</input>
                            <input value="12" type="checkbox">Forum</input>
                            <input value="13" type="checkbox">Additional Courses</input>

How can get each individual checkbox label in separate lines. I've tried everything.

CodePudding user response：

You need to adjust your markup a bit. Firstly, the <label> should not be used to group a collection of inputs, it should be used to describe which each input is.

Labels and checkbox input fields are by default, inline, so they would not go on separate lines without either some CSS making it block-level, or placing it inside a block-level element such as a <div>.

As for the checkbox size, this isn't so straightforward. You have to essentially mimic the checkbox by using pseudo-elements (:before or after) inside a label to make it selectable.

I've made one using your content below.

.form-control {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0.5em;
}

/* Make a gap between each option */
.form-control   .form-control {
  margin-top: 1em;
}

input[type="checkbox"] {
  appearance: none;
  background-color: #fff;
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  box-shadow: inset 1em 1em black;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  box-shadow: inset 1em 1em black;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

<p>What would you like to see improved? <span >(Check all that apply)</span></p>
<label ><input type="checkbox" value="1">Front-end Projects</label>
<label ><input type="checkbox" value="2">Back-end Projects</label>
<label ><input type="checkbox" value="3">Data Visualization</label>
<label ><input type="checkbox" value="4">Challenges</label>
<label ><input type="checkbox" value="5">Open Source Community</label>
<label ><input type="checkbox" value="6">Gitter help rooms</label>
<label ><input type="checkbox" value="7">Videos</label>
<label ><input type="checkbox" value="8">City Meetups</label>
<label ><input type="checkbox" value="9">Wiki</label>
<label ><input type="checkbox" value="10">Forum</label>
<label ><input type="checkbox" value="11">Additional Courses</label>

CodePudding user response：

<input> doesn't have an end tag </input>. There's two ways to use a <label> that's valid:

1. Wrap it around a form control

   <label> <input> </label>
   

2. Add an #id to the form control and for attribute to the <label>

   <input id='data'> <label for="data">Data</label>
   

In order to change the size of a checkbox or radio button use CSS property transform and function value scale() you'll need translateY() in order to adjust their vertical position as well.

You can make a new line-break by adding a <br> in HTML. See example.

<style>
  [type='checkbox'] {
    transform: scale(1.25) translateY(0.75px);
  }
</style>
<fieldset>
  <legend>What would you like to see improved? (Check all that apply)</legend>
  <input id="chx1" type="checkbox"> <label for="chx1">Front-end Projects</label><br>
  <input id="chx2" type="checkbox"> <label for="chx2">Back-end Projects</label><br>
  <input id="chx3" type="checkbox"> <label for="chx3">Data Visualization</label><br>
  <input id="chx4" type="checkbox"> <label for="chx4">Challenges</label><br>
  <input id="chx5" type="checkbox"> <label for="chx5">Open Source Community</label>
</fieldset>