如何在Microsoft Dynamics表单字段添加勾选标记并修正位置偏移

问题背景 #

作为HTML/CSS新手，需自定义优化Microsoft Dynamics表单，核心需求：

• 给已填写的字段添加勾选标记
• 给提交按钮添加淡入效果
  当前遇到的问题：勾选标记位置混乱，未按预期显示在输入字段内部。

现有代码 #

现有CSS #

.input-container {
  position: relative;
}

.checkmark {
  position: absolute;
  top: 0%;
  right: 0px;
  transform: translateY(-50%);
}

现有HTML片段 #

<div style="clear:both;"></div>
</div></div>
<div data-section="true" class="">
    <div style="display: flex; width: 100%; flex-wrap: wrap;">
        <div style="clear:both;"></div>
        <div data-container="true" class="columnContainer" data-container-width="100" style="display: block; min-height: 0px; min-width: 0px; width: calc(100% - 0px); box-sizing: border-box; padding: 10px; float: left; word-wrap: break-word; word-break: break-word; word-wrap: break-word; word-break: break-word;">

            <div data-editorblocktype="Field-email" style="padding-top: 0px;">
                <div class="marketing-field">
                    <div class="lp-form-field" data-required-field="true">
                        <input aria-required="true" class="lp-form-fieldInput" data-requirederrormessage="Vul een geldig emailadres in a.u.b." id="7f685ebb-7c54-4cff-a1bc-772562d25c38" name="7f685ebb-7c54-4cff-a1bc-772562d25c38" pattern="[^@\s\\&quot;&lt;&gt;)(\[\]:;,.]+(([.]{1}[^@\s\\&quot;&lt;&gt;)(\[\]:;,.]+)+?|)@([^@\s\\&quot;&lt;&gt;)(\[\]\+:;,.\-]+((((\.|\+|-|--)[^@\s\\&quot;&lt;&gt;)(\[\]+:;,.-]+)+?|)([.][^0-9@\s\\&quot;&lt;&gt;)(\[\]+:;,.-]+)+?)" placeholder="E-mail adres" required="required" style="width:100%; font-family:Gilroy, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, &amp;quot;Helvetica Neue&amp;quot;, Arial, &amp;quot;Noto Sans&amp;quot;, sans-serif, &amp;quot;Apple Color Emoji&amp;quot;, &amp;quot;Segoe UI Emoji&amp;quot;, &amp;quot;Segoe UI Symbol&amp;quot;, &amp;quot;Noto Color Emoji&amp;quot;;" title="Please enter a valid email address like example@email.com" type="email">
                        <span class="checkmark">&amp;#10004;</span>
                    </div>
                </div>
            </div>

解决方案 #

一、修正勾选标记位置问题 #

问题根源：当前CSS中.input-container未对应到HTML里的父容器，且定位参数设置不合理，同时勾选标记默认显示，未关联输入框的填写状态。调整方案如下：

1. 修改CSS：利用现有父容器类.lp-form-field设置相对定位，调整勾选标记的定位规则，并添加输入框内容关联的显示逻辑：

.lp-form-field {
  position: relative; /* 让勾选标记基于该容器定位 */
}

.lp-form-fieldInput {
  padding-right: 30px; /* 给输入框右侧预留勾选标记的空间，避免内容被覆盖 */
}

.checkmark {
  position: absolute;
  top: 50%;
  right: 10px; /* 调整与输入框右侧的间距 */
  transform: translateY(-50%); /* 垂直居中 */
  color: #28a745; /* 设置勾选标记颜色（例：绿色） */
  font-size: 18px;
  display: none; /* 默认隐藏 */
}

/* 当输入框有内容（占位符消失）时，显示勾选标记 */
.lp-form-fieldInput:not(:placeholder-shown) + .checkmark {
  display: inline-block;
}

2. 调整HTML：将勾选标记的实体字符替换为直接的✓符号，避免解析异常：

<div data-editorblocktype="Field-email" style="padding-top: 0px;">
  <div class="marketing-field">
    <div class="lp-form-field" data-required-field="true">
      <input aria-required="true" class="lp-form-fieldInput" data-requirederrormessage="Vul een geldig emailadres in a.u.b." id="7f685ebb-7c54-4cff-a1bc-772562d25c38" name="7f685ebb-7c54-4cff-a1bc-772562d25c38" pattern="[^@\s\\&quot;&lt;&gt;)(\[\]:;,.]+(([.]{1}[^@\s\\&quot;&lt;&gt;)(\[\]:;,.]+)+?|)@([^@\s\\&quot;&lt;&gt;)(\[\]\+:;,.\-]+((((\.|\+|-|--)[^@\s\\&quot;&lt;&gt;)(\[\]+:;,.-]+)+?|)([.][^0-9@\s\\&quot;&lt;&gt;)(\[\]+:;,.-]+)+?)" placeholder="E-mail adres" required="required" style="width:100%; font-family:Gilroy, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &amp;quot;Segoe UI&amp;quot;, Roboto, &amp;quot;Helvetica Neue&amp;quot;, Arial, &amp;quot;Noto Sans&amp;quot;, sans-serif, &amp;quot;Apple Color Emoji&amp;quot;, &amp;quot;Segoe UI Emoji&amp;quot;, &amp;quot;Segoe UI Symbol&amp;quot;, &amp;quot;Noto Color Emoji&amp;quot;;" title="Please enter a valid email address like example@email.com" type="email">
      <span class="checkmark">✓</span>
    </div>
  </div>
</div>

二、添加提交按钮淡入效果 #

假设提交按钮的类为lp-form-submit，通过CSS动画实现淡入效果：

/* 定义淡入动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px); /* 伴随轻微下移的入场效果 */
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lp-form-submit {
  animation: fadeIn 0.5s ease-in-out forwards;
  /* 如需延迟触发，可添加：animation-delay: 0.3s; */
}

若实际按钮类不同，替换为表单中提交按钮对应的类即可。

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