如何去除FMX复选框与单选框的默认内边距以实现左对齐？

要解决复选框、单选框无法沿左侧红线对齐的问题，核心是覆盖浏览器对原生表单控件的默认样式，以下是具体实现方案：

• 重置控件默认边距与外观
  浏览器会给checkbox、radio这类控件预设margin、padding甚至定位偏移，直接清除这些默认值：

  input[type="checkbox"],
  input[type="radio"] {
    margin: 0;
    padding: 0;
    position: relative;
    left: 0;
    top: 0;
    /* 若不需要保留原生控件样式，可移除默认外观彻底消除额外空间 */
    /* -webkit-appearance: none;
    appearance: none; */
  }
  

• 用Flex布局统一对齐容器内元素
  将控件与对应文本放在同一个容器中，通过Flex布局强制水平对齐，避免基线偏移导致的错位：

  .form-row {
    display: flex;
    align-items: center;
    /* 控件与文本的间距可按需调整 */
    gap: 6px;
  }
  

  对应HTML结构示例：

  <div class="form-row">
    <input type="checkbox" id="opt1">
    <label for="opt1">选项文本</label>
  </div>
  

• 排查父容器样式
  检查控件的父元素是否设置了padding-left、margin-left或text-indent，这些属性也会导致整体偏移，确保父容器的左侧间距为0：

  .form-container {
    padding-left: 0;
    margin-left: 0;
    text-indent: 0;
  }
  

• 微调对齐（针对特殊浏览器）
  部分浏览器的原生控件仍可能存在细微偏移，可通过transform进行精准调整：

  input[type="checkbox"],
  input[type="radio"] {
    transform: translateX(0);
  }
  

内容的提问来源于stack exchange，提问作者Damian Hong-Minh Nguyen