I’m currently learning HTML from freecodecamp.org and I’ve found myself stuck on one of the early projects. When trying to style my page, I can’t seem to get labels and radios/checkboxes on the same line. I’ve tried adding classes to the labels, but I couldn’t get that to work. I’ve tried to address those labels and inputs specifically with input[type="radio"] as well. Looking for suggestions, perhaps some guidance and explanation of what I’m doing wrong too.
body {
background-color: #1F3A46;
color: #EEEAFA;
width: 100%;
height: 100vh;
margin: 0;
font-family: Sans-Serif;
font-size: 16px;
}
h1, p{
margin: 1em auto;
text-align: center;
}
form{
width: 60vw;
max-width: 500px;
min-width: 300px;
margin: 0 auto;
padding-bottom: 2em;
}
fieldset {
border: none;
padding: 2rem 0;
}
fieldset:not(:last-of-type) {
border-bottom: 3px solid #1c2f38
}
label {
display: block;
margin: 0.5rem 0;
}
input, textarea, select{
margin: 10px 0 0 0;
min-width: 100%;
min-height: 2em;
}
input, textarea {
background-color: #2a4754;
border: 1px solid #2a4754;
color: #EEEAFA;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Keyboard Survey Project</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1 id="title">Keyboard Survey</h1>
<p id="description">We want to know what your preferred type of keyboard is!</p>
<form id="survey-form">
<fieldset>
<label id="name-label">Name: <input id="name" type="text" placeholder="Keyboard Kenny" required /> </label>
<label id="email-label">Email: <input id="email" type="email" placeholder="example@freecodecamp.org" required /> </label>
<label id="number-label">Age(optional): <input id="number" type="number" min="13" max="120" placeholder="99" /> </label>
</fieldset>
<fieldset>
<label>Size:
<select id="dropdown" required>
<option name="dropdownmenu" value="100" >Full Sized</option>
<option name="dropdownmenu" value="90">90%/1800 Compact</option>
<option name="dropdownmenu" value="80" >TKL/80%</option>
<option name="dropdownmenu" value="75" >75%</option>
<option name="dropdownmenu" value="65" >65%</option>
<option name="dropdownmenu" value="60" >60%</option>
<option name="dropdownmenu" value="40" >40%</option>
</select>
</label>
<label>Layout:
<select id="dropdown2" required>
<option name="dropdownmenu2" value="ansi" >ANSI</option>
<option name="dropdownmenu2" value="iso">ISO</option>
<option name="dropdownmenu2" value="jis">JIS</option>
</select>
</label>
</fieldset>
<fieldset>
<label>Do you like RGB lighting?
<label>Yes<input type="radio" name="rgb" value="rgbyes"/></label>
<label>No<input type="radio" name="rgb" value="rgbno" /></label>
</label>
</fieldset>
<fieldset>Favorite Switch Type:
<label>Tactile<input type="checkbox" value="tactile" /></label>
<label>Linear<input type="checkbox" value="linear" /></label>
<label>Clicky<input type="checkbox" value="clicky" /></label>
</fieldset>
<fieldset>
<label>Do you have any special preferences not listed above?
<textarea rows="3" cols="30" placeholder="Place them here!"></textarea>
</label>
</fieldset>
<input id="submit" type="submit" value="Submit" />
</form>
</body> >Solution :
The problem is that this code is making the radio buttons fill the entire line, leaving no room for the labels:
input, textarea, select{
margin: 10px 0 0 0;
min-width: 100%;
min-height: 2em;
}
I would suggest adding this code to avoid selecting checkboxes and radios
input:not([type="radio"],[type="checkbox"]), textarea, select{
margin: 10px 0 0 0;
min-width: 100%;
min-height: 2em;
}
You can then style those types of inputs separately using this selector:
input[type="radio"],[type="checkbox"] {
/*styles here*/
}