Search code examples
htmlcssformscheckboxrow

Create a new row of checkboxes

I have 10 checkboxes in a row currently, however it is very crowded. I would rather have 5 checkboxes in 2 rows but have no idea how to achieve this.

I am new to HTML so I may be forgetting something simple. I tried a couple of ways but nothing seems to work. (I left all the code just in case, but labelled where everything is. Checkboxes are at the bottom.)

Link: https://codepen.io/Tantlu/full/JjyQYZw

HTML

<body>
  <div class="video-bg">
 <video width="320" height="240" autoplay loop muted>
  <source src="https://assets.codepen.io/3364143/7btrrd.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
  
<!-- Header -->  
  
<h1>Design Survey.</h1>  

<!-- Form -->  
  
<form class="form">
  
 <!-- Form Element 1 --> 
  
 <div class="form-control">
   <label for="name" class="label-name">
     Name
   </label>
  <input type= "text" id= "name" placeholder= ""/>
        </div>
  
  <div class="form-control">
   <label for="email" class="label-email">
     Email
   </label>
  <input type="email" id= "email" placeholder= "" />
        </div>
  
  <div class="form-control">
   <label for="age" class="label-age">
     Age
   </label>
  <input type= "number" id= "age" placeholder= ""/>
        </div>
  
  <!-- Drop Down Box -->
  
  <div class="form-control">
    <label for="edu" id="label-edu">
       What is your education level?
    </label>
    
   <div class="options"> 
    <select name="edu" id="dropdown">
      <option hidden></option>
      <option value="high-school">High School</option>
      <option value="cert-4">Certificate IV</option>
      <option value="diploma">Diploma</option>
      <option value="b-degree">Bachelors Degree</option>
      <option value="m-degree">Masters Degree</option>
     </select>
    </div>  
  </div>      
    
    
<div class="form-control">
  <label>Do you like this design?</label>
 
<!-- Radio Buttons -->
  
 <div class="rad-row"> 
  <label for="rad1" class="rc-label">
    <input type="radio" id="rad1" name="radio">
    <span class="rc-text">Yes</span>
    </input>
  </label>
  
  <label for="rad2" class="rc-label">
    <input type="radio" id="rad2" name="radio">
    <span class="rc-text">No</span> 
    </input>
  </label>
  
  <label for="rad3" class="rc-label">
    <input type="radio" id="rad3" name="radio">
    <span class="rc-text">Unsure</span> 
    </input>
  </label>
  </div>
</div>

<!-- Checkboxes -->

<div class="form-control">
  <label class="label2">Languages and frameworks known</label>

<div class= "checkbox-row">
<label for="inp-1" class="rc-label">
   <input type="checkbox" id="inp-1" name="inp">
  <span class="rc-text">C</span>
  </input>
 </label>
   
<label for="inp-2" class="rc-label">
   <input type="checkbox" name="inp" id="inp-2">
  <span class="rc-text">C++</span>
  </input>
 </label>

<label for="inp-3" class="rc-label">
   <input type="checkbox" name="inp" id="inp-3">
  <span class="rc-text">C#</span>
  </input>
 </label>

<label for="inp-4" class="rc-label">
   <input type="checkbox" id="inp-4" name="inp">
  <span class="rc-text">Java</span>
  </input>
 </label>

<label for="inp-5" class="rc-label">
   <input type="checkbox" id="inp-5" name="inp">
  <span class="rc-text">Python</span>
  </input>
 </label>

<label for="inp-6" class="rc-label">
   <input type="checkbox" id="inp-6" name="inp">
  <span class="rc-text">JavaScript</span>
  </input>
 </label>

<label for="inp-7" class="rc-label">
   <input type="checkbox" id="inp-7" name="inp">
  <span class="rc-text">React</span>
  </input>
 </label>

<label for="inp-8" class="rc-label">
   <input type="checkbox" id="inp-8" name="inp">
  <span class="rc-text">HTML</span>
  </input>
 </label>

<label for="inp-9" class="rc-label">
   <input type="checkbox" id="inp-9" name="inp">
  <span class="rc-text">Solidity</span>
  </input>
 </label>

<label for="inp-10" id="inp-1" class="rc-label">
   <input type="checkbox" id="inp-10" name="inp">
  <span class="rc-text">Spring</span>
  </input>
 </label>
</div>  
</div>  
</form>
</body>

CSS

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");

body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
}

/* Background */

.video-bg {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
 }

/* Header */

h1 {
  position: relative;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: center;
  top: 0;
  font-size: 45px;
}

/* Form */

.form {
  max-width: 700px;
  margin: 50px auto; 
  background-color: rgba(16 18 27 / 30%);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 30px 30px;
}

/* Form Items */

.form-control {
  text-align: left;
  margin-bottom: 25px;
  font-size: 1.1rem;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.form-control label {
  display: block;
  margin-bottom: 15px;
}

.form-control input, 
.form-control select, 
.form-control textarea {
  background: rgba(16 18 27 / 35%);
  width: 97%;
  border: none;
  border-radius: 4px;
  padding: 10px;
  display: block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgb(134 140 160 / 8%);
}

/* Dropdown Box */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select {
  width: 100% !important; 
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 10;
  position: relative;
  background: transparent;
}

.options {
  position: relative;
  margin-bottom: 25px;
}

.options::after {
  content: ">";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 6px;
  right: 15px;
  position: absolute;
  z-index: 0;
}

/* Radio Buttons & Checkboxes */

.form-control input[type="radio"],
.form-control input[type="checkbox"] {
  display: inline-block;
  width: auto;
}

.rc-label {
  border-radius: 100px;
  padding: 10px 10px;
  cursor: pointer;
  transition: .3s;
  flex: 1;
}

.rc-label:hover,
.rc-label:focus-within {
  background: hsla(0, 0%, 80%, .14);
}

.rc-text {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
}

/* Radio Buttons */

.rad-row {
  display: flex;
  margin-bottom: -20px;
}

/* Checkboxes */

.checkbox-row {
  display: flex;
}
Solution

  • This method is fully responsive using flexbox. It only requires the addition of 1 line: flex-wrap: wrap; to .checkbox-row.

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
}


/* Background */

.video-bg {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Header */

h1 {
  position: relative;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: center;
  top: 0;
  font-size: 45px;
}


/* Form */

.form {
  max-width: 700px;
  margin: 50px auto;
  background-color: rgba(16 18 27 / 30%);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 30px 30px;
}


/* Form Items */

.form-control {
  text-align: left;
  margin-bottom: 25px;
  font-size: 1.1rem;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.form-control label {
  display: block;
  margin-bottom: 15px;
}

.form-control input,
.form-control select,
.form-control textarea {
  background: rgba(16 18 27 / 35%);
  width: 97%;
  border: none;
  border-radius: 4px;
  padding: 10px;
  display: block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgb(134 140 160 / 8%);
}


/* Dropdown Box */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select {
  width: 100% !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 10;
  position: relative;
  background: transparent;
}

.options {
  position: relative;
  margin-bottom: 25px;
}

.options::after {
  content: ">";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 6px;
  right: 15px;
  position: absolute;
  z-index: 0;
}


/* Radio Buttons & Checkboxes */

.form-control input[type="radio"],
.form-control input[type="checkbox"] {
  display: inline-block;
  width: auto;
}

.rc-label {
  border-radius: 100px;
  padding: 10px 5px;
  cursor: pointer;
  transition: .3s;
  flex: 0 1 calc(20% - 10px);
  max-width: 130px;
}

.rc-label:hover,
.rc-label:focus-within {
  background: hsla(0, 0%, 80%, .14);
}

.rc-text {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
}


/* Radio Buttons */

.rad-row {
  display: flex;
  margin-bottom: -20px;
}


/* Checkboxes */

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
}
    <body>
  <div class="video-bg">
    <video width="320" height="240" autoplay loop muted>
  <source src="https://assets.codepen.io/3364143/7btrrd.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
  </div>

  <!-- Header -->

  <h1>Design Survey.</h1>

  <!-- Form -->

  <form class="form">

    <!-- Form Element 1 -->

    <div class="form-control">
      <label for="name" class="label-name">
     Name
   </label>
      <input type="text" id="name" placeholder="" />
    </div>

    <div class="form-control">
      <label for="email" class="label-email">
     Email
   </label>
      <input type="email" id="email" placeholder="" />
    </div>

    <div class="form-control">
      <label for="age" class="label-age">
     Age
   </label>
      <input type="number" id="age" placeholder="" />
    </div>

    <!-- Drop Down Box -->

    <div class="form-control">
      <label for="edu" id="label-edu">
       What is your education level?
    </label>

      <div class="options">
        <select name="edu" id="dropdown">
          <option hidden></option>
          <option value="high-school">High School</option>
          <option value="cert-4">Certificate IV</option>
          <option value="diploma">Diploma</option>
          <option value="b-degree">Bachelors Degree</option>
          <option value="m-degree">Masters Degree</option>
        </select>
      </div>
    </div>


    <div class="form-control">
      <label>Do you like this design?</label>

      <!-- Radio Buttons -->

      <div class="rad-row">
        <label for="rad1" class="rc-label">
    <input type="radio" id="rad1" name="radio">
    <span class="rc-text">Yes</span>
    </input>
  </label>

        <label for="rad2" class="rc-label">
    <input type="radio" id="rad2" name="radio">
    <span class="rc-text">No</span> 
    </input>
  </label>

        <label for="rad3" class="rc-label">
    <input type="radio" id="rad3" name="radio">
    <span class="rc-text">Unsure</span> 
    </input>
  </label>
      </div>
    </div>

    <!-- Checkboxes -->

    <div class="form-control">
      <label class="label2">Languages and frameworks known</label>

      <div class="checkbox-row">
        <label for="inp-1" class="rc-label">
   <input type="checkbox" id="inp-1" name="inp">
  <span class="rc-text">C</span>
  </input>
 </label>

        <label for="inp-2" class="rc-label">
   <input type="checkbox" name="inp" id="inp-2">
  <span class="rc-text">C++</span>
  </input>
 </label>

        <label for="inp-3" class="rc-label">
   <input type="checkbox" name="inp" id="inp-3">
  <span class="rc-text">C#</span>
  </input>
 </label>

        <label for="inp-4" class="rc-label">
   <input type="checkbox" id="inp-4" name="inp">
  <span class="rc-text">Java</span>
  </input>
 </label>

        <label for="inp-5" class="rc-label">
   <input type="checkbox" id="inp-5" name="inp">
  <span class="rc-text">Python</span>
  </input>
 </label>

        <label for="inp-6" class="rc-label">
   <input type="checkbox" id="inp-6" name="inp">
  <span class="rc-text">JavaScript</span>
  </input>
 </label>

        <label for="inp-7" class="rc-label">
   <input type="checkbox" id="inp-7" name="inp">
  <span class="rc-text">React</span>
  </input>
 </label>

        <label for="inp-8" class="rc-label">
   <input type="checkbox" id="inp-8" name="inp">
  <span class="rc-text">HTML</span>
  </input>
 </label>

        <label for="inp-9" class="rc-label">
   <input type="checkbox" id="inp-9" name="inp">
  <span class="rc-text">Solidity</span>
  </input>
 </label>

        <label for="inp-10" id="inp-1" class="rc-label">
   <input type="checkbox" id="inp-10" name="inp">
  <span class="rc-text">Spring</span>
  </input>
 </label>
      </div>
    </div>
  </form>
</body>

    Here is another version that starts out with 5 rows as mentioned in your comment (all changes are in .rc-label)

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
body {
  font-family: 'Poppins', sans-serif;
  color: #fff;
}


/* Background */

.video-bg {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Header */

h1 {
  position: relative;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  text-align: center;
  top: 0;
  font-size: 45px;
}


/* Form */

.form {
  max-width: 700px;
  margin: 50px auto;
  background-color: rgba(16 18 27 / 30%);
  border-radius: 14px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 30px 30px;
}


/* Form Items */

.form-control {
  text-align: left;
  margin-bottom: 25px;
  font-size: 1.1rem;
  letter-spacing: 0.4px;
  font-weight: 500;
}

.form-control label {
  display: block;
  margin-bottom: 15px;
}

.form-control input,
.form-control select,
.form-control textarea {
  background: rgba(16 18 27 / 35%);
  width: 97%;
  border: none;
  border-radius: 4px;
  padding: 10px;
  display: block;
  font-family: inherit;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
  color: #fff;
  outline: none;
  box-shadow: 0 0 0 2px rgb(134 140 160 / 8%);
}


/* Dropdown Box */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

select {
  width: 100% !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  z-index: 10;
  position: relative;
  background: transparent;
}

.options {
  position: relative;
  margin-bottom: 25px;
}

.options::after {
  content: ">";
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  top: 6px;
  right: 15px;
  position: absolute;
  z-index: 0;
}


/* Radio Buttons & Checkboxes */

.form-control input[type="radio"],
.form-control input[type="checkbox"] {
  display: inline-block;
  width: auto;
}

.rc-label {
  border-radius: 100px;
  padding: 10px 5px;
  cursor: pointer;
  transition: .3s;
  flex: 0 1 calc(20% - 10px);
  max-width: 130px;
}

.rc-label:hover,
.rc-label:focus-within {
  background: hsla(0, 0%, 80%, .14);
}

.rc-text {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.1px;
}


/* Radio Buttons */

.rad-row {
  display: flex;
  margin-bottom: -20px;
}


/* Checkboxes */

.checkbox-row {
  display: flex;
  flex-wrap: wrap;
}
    <body>
  <div class="video-bg">
    <video width="320" height="240" autoplay loop muted>
      <source src="https://assets.codepen.io/3364143/7btrrd.mp4" type="video/mp4">
    Your browser does not support the video tag.
    </video>
  </div>

  <!-- Header -->

  <h1>Design Survey.</h1>

  <!-- Form -->

  <form class="form">

    <!-- Form Element 1 -->

    <div class="form-control">
      <label for="name" class="label-name">
         Name
       </label>
      <input type="text" id="name" placeholder="" />
    </div>

    <div class="form-control">
      <label for="email" class="label-email">
         Email
       </label>
      <input type="email" id="email" placeholder="" />
    </div>

    <div class="form-control">
      <label for="age" class="label-age">
         Age
       </label>
      <input type="number" id="age" placeholder="" />
    </div>

    <!-- Drop Down Box -->

    <div class="form-control">
      <label for="edu" id="label-edu">
           What is your education level?
        </label>

      <div class="options">
        <select name="edu" id="dropdown">
          <option hidden></option>
          <option value="high-school">High School</option>
          <option value="cert-4">Certificate IV</option>
          <option value="diploma">Diploma</option>
          <option value="b-degree">Bachelors Degree</option>
          <option value="m-degree">Masters Degree</option>
        </select>
      </div>
    </div>


    <div class="form-control">
      <label>Do you like this design?</label>

      <!-- Radio Buttons -->

      <div class="rad-row">
        <label for="rad1" class="rc-label">
        <input type="radio" id="rad1" name="radio">
        <span class="rc-text">Yes</span>
        </input>
      </label>

        <label for="rad2" class="rc-label">
        <input type="radio" id="rad2" name="radio">
        <span class="rc-text">No</span> 
        </input>
      </label>

        <label for="rad3" class="rc-label">
        <input type="radio" id="rad3" name="radio">
        <span class="rc-text">Unsure</span> 
        </input>
      </label>
      </div>
    </div>

    <!-- Checkboxes -->

    <div class="form-control">
      <label class="label2">Languages and frameworks known</label>

      <div class="checkbox-row">
        <label for="inp-1" class="rc-label">
       <input type="checkbox" id="inp-1" name="inp">
      <span class="rc-text">C</span>
      </input>
     </label>

        <label for="inp-2" class="rc-label">
       <input type="checkbox" name="inp" id="inp-2">
      <span class="rc-text">C++</span>
      </input>
     </label>

        <label for="inp-3" class="rc-label">
       <input type="checkbox" name="inp" id="inp-3">
      <span class="rc-text">C#</span>
      </input>
     </label>

        <label for="inp-4" class="rc-label">
       <input type="checkbox" id="inp-4" name="inp">
      <span class="rc-text">Java</span>
      </input>
     </label>

        <label for="inp-5" class="rc-label">
       <input type="checkbox" id="inp-5" name="inp">
      <span class="rc-text">Python</span>
      </input>
     </label>

        <label for="inp-6" class="rc-label">
       <input type="checkbox" id="inp-6" name="inp">
      <span class="rc-text">JavaScript</span>
      </input>
     </label>

        <label for="inp-7" class="rc-label">
       <input type="checkbox" id="inp-7" name="inp">
      <span class="rc-text">React</span>
      </input>
     </label>

        <label for="inp-8" class="rc-label">
       <input type="checkbox" id="inp-8" name="inp">
      <span class="rc-text">HTML</span>
      </input>
     </label>

        <label for="inp-9" class="rc-label">
       <input type="checkbox" id="inp-9" name="inp">
      <span class="rc-text">Solidity</span>
      </input>
     </label>

        <label for="inp-10" id="inp-1" class="rc-label">
       <input type="checkbox" id="inp-10" name="inp">
      <span class="rc-text">Spring</span>
      </input>
     </label>
      </div>
    </div>
  </form>
</body>