Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Gap between <select> tag when user selecting

Tags:

html

css

I'm creating a form and in that form I have multiple <select> tags but
when I press Ctr + A I get gaps and whitespaces in the selection like this:

enter image description here

This happens in every browser except Firefox
I tried completely removing the whitespace and newlines from the code but it still didn't work
any idea how to fix this?

Jsfiddle

Source Code:

* {
  margin: 0;
}

form {
  background-color: black;
  color: white;
  padding: 2rem 2rem 1rem 2rem;
}

fieldset {
  border: 0;
}

form label {
  margin: 2rem 1rem 1rem 0;
  display: inline-block;
}
<form>
  <fieldset>

    <label><span style="color:red">* </span>Must fill</label><select>
      <option>option 1</option>
    </select><br>
    <hr>

    <label> generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select><br>

    <label> another generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select><br>
    <label>Fill Info</label><br>
    <textarea></textarea><br>

    <label>Fill other info<br>(additional)</label><br>
    <textarea></textarea><br>

    <button>Send</button>
     </fieldset>
</form>

1 Answers

Maybe this will help

* {
  margin: 0;
}

form {
  background-color: black;
  color: white;
  padding: 2rem 2rem 1rem 2rem;
}

fieldset {
  border: 0;
}

label {
  margin: 2rem 0rem 1rem 0;
  display: inline-block;
}
<form>
  <fieldset>
    <label style="margin-right: 1rem;">
      <span style="color:red">* </span>Must fill</label>
    <select>
      <option required>option 1</option>
    </select>
    <br>
    <hr>
    <label> generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select>
    <br>
    <label> another generic Q :</label><br>
    <select>
      <option>option 1</option>
    </select>
    <br>
    <label>Fill Info</label><br>
    <textarea></textarea>
    <br>
    <label>Fill other info<br>(additional)</label><br>
    <textarea></textarea>
    <br>
    <button>Send</button>
  </fieldset>
</form>

Changed

form label {
  margin: 2rem 1rem 1rem 0;
  display: inline-block;
}

to

label {
  margin: 2rem 0rem 1rem 0;
  display: inline-block;
}

added margin-right: 1rem for the first <label>

I think you should reduce some more margin b/w them to remove the other spaces\gaps.

like image 97
Random Kindle Avatar answered Jul 10 '26 03:07

Random Kindle



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!