Anyone can help me styling checkboxes?

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
    <h1 id="title">Survey Form</h1>
    <p id="description">Please fill the form.</p>
  <form id="survey-form">
    <label id="name-label">Enter your name: <input id="name" type="text" placeholder="Alex" required /></label>
     <label id="email-label">Enter your email: <input id="email" type="email" placeholder="" required /></label>
    <label id="number-label" >Enter your age(optional): <input id="number" type="number" min="18" max="99" placeholder="Enter your number" /></label>
      <label id="dropdown-list">Why do you wanna learn programming?
      <select id="dropdown">
      <option value="">(select one)</option>
      <option value="1">For career change</option>
      <option value="2">For hobby</option>
      <option value="2">For work</option>
      <legend>Which language do u wanna learn?</legend>
      <label><input id="html" type="radio" name="html-c#" value="html" class="inline" checked> Html</label>
      <label><input id="c#" type="radio" name="html-c#" value="c#" class="inline"> C#</label>
    <label for="bio">Provide a bio:
      <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding because..."></textarea>
    <legend>Where do you see yourself in 3 years?</legend>
    <input type="checkbox" id="software-developer" value="software-developer" checked /><label for="software-developer">Software-developer</label>
    <input type="checkbox" id="android-developer" value="android-developer" /><label for="android-developer">Android-developer</label>
    <input type="checkbox" id="ios-developer" value="ios-developer" /><label for="ios-developer">Ios-developer</label>
    <input id="submit" type="submit">
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 15px;

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;
  border-bottom: 3px solid #3b3b4f;

fieldset:last-of-type {
  border-bottom: none;

label {
  display: block;
  margin: 0.5rem 0;

select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 1em;

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;

This is my project but checkboxes look bad. Can i fix them to make text and boxes in same line?

Your level elements are all type block so that is why they are on separate lines.
You can try to use an inline display of some kind or use a layout manager like flex box layout if you know how to.

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.