Survey Form - Build a Survey Form

HTML-CSS
1

Feedback please. This is what I have completed so far. I would like to get feedback because I know there are a lot of things to improve, also when I hover the mouse over the select element, it changes its size, moving all the form elements bellow the select element, how can I resolve this. thank you

help1
help12880×1736 405 KB

in advance.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
    <title>Calisthenic Form</title>
  </head>
  <body>
    <h1 id="title">Calisthenic Form</h1>
    <p id="description">Let us know your favorite calisthenic's excersices.</p>
    <form action='https://register-demo.freecodecamp.org' id="survey-form">
    <fieldset>
      <label id="name-label">Full Name: <input id="name" name="name" type="text" required placeholder="Enter your name." /></label><br>
     <label id="email-label">Email: <input name="email" id="email" type="email" required placeholder="Provide a valid email." /></label><br>
     <label id="number-label">Age: <input id="number" name="number" type="number" min="15" max="120" placeholder="Years." /></label>
    </fieldset>
    <fieldset>
      <label for="exercise">What's your favorite calisthenic's excersice?
        <select id="dropdown" name="exercise">
          <option value="">(Select one)</option>
          <option value="1">Push-ups.</option>
          <option value="2">Pull-ups.</option>
          <option value="3">Chin-ups.</option>
          <option value="4">Plank.</option>
          <option value="5">Lunges.</option>
          <option value="6">Other.</option>
        </select> 
      </label>  
    </fieldset>
    <fieldset>
      <label>Where do you do calisthenics?<br><input value="1" id="indoor" type="radio" name="place" class="inline" />Indoor</label>
      <label><input value="2" id="outdoor" type="radio" name="place" class="inline" />Outddoor</label>
      <label><input value="3" id="other" type="radio" name="place" class="inline" />Other</label>
    </fieldset>
    <fieldset>
      <legend>What equipment do you use?</legend>
      <label for="rings"><input id="rings" value="rings" name="equipment" type="checkbox" checked class="inline" />Gymnastics Rings.</label>
      <label for="parallettes"><input id="parallettes" value="parallettes" name="equipment" type="checkbox" class="inline" />Parallettes.</label>
      <label for="Others"><input id="Others" value="Others" name="equipment" type="checkbox" class="inline" />Others.</label>
      <label for="body"><input id="body" value="body" name="equipment" type="checkbox" class="inline" />Only my body.</label>
    </fieldset>
    <fieldset>
      <label for="journey">Share your calisthenic journey:
        <textarea id="journey" name="journey" rows="4" cols="40" placeholder="I started when I was 15 years old..."></textarea>
      </label>
    </fieldset>
    <input id="submit" type="submit" value="Submit">
    </form>
          <footer>
        <p>Sebastian BG</p>
      </footer>
  </body>

/* file: styles.css */
body{
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: rgb(245, 255, 250);
  background-attachment: fixed;
  font-size: 18px;
  font-family: cursive;
  background-image: url(https://lh3.googleusercontent.com/pw/AMWts8Cl1MEhxXiim6Rqw28nDZF2hrt5-r-iuOu-Mq4NoGi676XXULXnZKsAGJfPgtc-4jbcI9E9gwsfz7FGMNAjtfptktmB6yBCnb42NtRGhWnO_HwCgn9iTqhnJ4QnRLc3CXX5Qjcsnrszs2aS-VqEh9yw=w759-h500-s-no) 
}

h1, p {
  text-align: center;
  text-shadow: 0 0 20px #000000, 0 3px #000000;
}

fieldset {
  border: none;
}
form {
  background-color: #352f44;
  color: #dbd8e3;
  padding: 10px 10px 15px 10px;
  border-radius: 10px;
  margin: 0 auto;
}
label {
  display: block;
}
input, select {
  border-radius: 10px;
}
input, select, textarea {
  width: 100%;
}
.inline {
  width: unset;
}
input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #dbd8e3;
  border-color: 352f44;
  min-width: 300px;
  }
  input[type="submit"]:hover, 
  input[type="text"]:hover,
  input[type="email"]:hover,
  input[type="number"]:hover,
  input[type="radio"]:hover,
  input[type="checkbox"]:hover,
  select:hover {
  border: 2px solid #871F78;
  box-shadow: 0 0 10px #871F78 ;
  cursor: pointer;
  }

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36 Edg/111.0.1661.54

Challenge: Survey Form - Build a Survey Form

Link to the challenge:

1 Like
2

You have added hover effect on select element that changes its border width.
This is an example that you can try:

input:hover   
    {
  border: 10px solid #871F78;
  box-shadow: 0 0 10px #871F78 ;
  cursor: pointer;
  }

I have exclude the select element from the rule, but all input elements will move when you hover over them because of the exaggerated border width.