表单Ctrl+A全选时<select>标签间出现空白间隙的修复方案求助

问题原因 #

该空白间隙是Chrome、Edge等Webkit/Blink内核浏览器的默认全选逻辑导致的：<select>默认属于行内替换元素，浏览器全局全选时会将该行剩余的所有横向空间都纳入选中范围，该特性和代码中的空格换行没有直接关联，所以删除空白字符无法解决。

修复方案 #

推荐用Flex布局重构表单行，替换原有的inline-block+<br>的排版方式，即可彻底解决问题：

调整后的CSS代码 #

* {
  margin: 0;
  box-sizing: border-box;
}

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

fieldset {
  border: 0;
}

/* 新增表单行样式 */
.form-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
/* 单独占行的控件行 */
.form-row-full {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

form label {
  display: inline-block;
}

调整后的HTML代码 #

<form>
  <fieldset>
    <div class="form-row">
      <label><span style="color:red">* </span>必填项</label>
      <select>
        <option>选项1</option>
      </select>
    </div>
    <hr>
    <div class="form-row form-row-full">
      <label>通用问题1：</label>
      <select>
        <option>选项1</option>
      </select>
    </div>
    <div class="form-row form-row-full">
      <label>通用问题2：</label>
      <select>
        <option>选项1</option>
      </select>
    </div>
    <div class="form-row form-row-full">
      <label>填写信息</label>
      <textarea></textarea>
    </div>
    <div class="form-row form-row-full">
      <label>填写其他信息<br>（附加信息）</label>
      <textarea></textarea>
    </div>
    <div class="form-row">
      <button>提交</button>
    </div>
  </fieldset>
</form>

临时兼容方案 #

如果不想重构原有排版，可以给form标签添加如下CSS属性，限制全选范围：

form {
  user-select: contain;
}

这个属性会让全选范围只包含form内部的实际内容，不会选中多余空白区域，兼容性支持所有现代浏览器。

内容的提问来源于stack exchange，提问作者user15573857