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;
}
Aucun commentaire:
Enregistrer un commentaire