html css forms microsoft-dynamics checkmark

How do I add a checkmark on my form fields?

I'll start with a confession; I'm very new with HTML and CSS. Nonetheless, I haven gotten the task from work to customise and optimise the Microsoft Dynamics forms with HTML and CSS.

The request is to add checkmarks to the field that are filled in and a submit button that has a fade effect. However, everything I do, the checkmark is all over the place.

`*/ CS`your text`S styling */ 
.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;<>)(\[\]:;,.]+(([.]{1}[^@\s\\&quot;<>)(\[\]:;,.]+)+?|)@([^@\s\\&quot;<>)(\[\]\+:;,\.-]+(((\.|\+|-|--)[^@\s\\&quot;<>)(\[\]+:;,.-]+)+?|)([.][^0-9@\s\\&quot;<>)(\[\]+:;,.-]+)+?)" placeholder="E-mail adres" required="required" style="width:100%; font-family:Gilroy, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;" title="Please enter a valid email address like example@email.com" type="email">
                        <span class="checkmark">&#10004;</span>
                    </div>
                </div>
            </div>`

What would you suggest?

Cheers!

By adding this CSS-styling

`.input-container { position: relative; }

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

I thought that the checkmark would be in the e-mail field. But this is the result:

lost Checkmark.

Solution

your attempt was almost right, the position: absolute refers to the nearest parent that has a position set to relative, in your code you are setting the relative position to the correct parent but in the html the icon is outside of it. Also, using top: 50% for the checkmark is centered.

.lp-form-field {
  position: relative;
}
.lp-form-fieldInput{
  width: 100%;
}

.lp-form-fieldInput:valid{
  background-color: green;
}

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

.lp-form-fieldInput:valid + .checkmark{
  visibility: visible !important; 
}

<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;<>)(\[\]:;,.]+(([.]{1}[^@\s\\&quot;<>)(\[\]:;,.]+)+?|)@([^@\s\\&quot;<>)(\[\]\+:;,\.-]+(((\.|\+|-|--)[^@\s\\&quot;<>)(\[\]+:;,.-]+)+?|)([.][^0-9@\s\\&quot;<>)(\[\]+:;,.-]+)+?)" placeholder="E-mail adres" required="required" style="width:100%; font-family:Gilroy, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;" title="Please enter a valid email address like example@email.com" type="email">
                      <span class="checkmark">&#10004;</span> 
                    </div>
                   <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;<>)(\[\]:;,.]+(([.]{1}[^@\s\\&quot;<>)(\[\]:;,.]+)+?|)@([^@\s\\&quot;<>)(\[\]\+:;,\.-]+(((\.|\+|-|--)[^@\s\\&quot;<>)(\[\]+:;,.-]+)+?|)([.][^0-9@\s\\&quot;<>)(\[\]+:;,.-]+)+?)" placeholder="E-mail adres" required="required" style="width:100%; font-family:Gilroy, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;;" title="Please enter a valid email address like example@email.com" type="email" value="example@gmail.com">
                      <span class="checkmark">&#10004;</span> 
                    </div>
                </div>
            </div>