Placeholder image in magento input field

Adding image in the field to increase the style of the input field.

It can be done by overriding current page xml and phtml to custom theme module.

For example adding a mail icon in the email field

Module Overriding >>> app/design/frontend/Module_name/Theme/Magento_Customer/templates/form/login.phtml

Code:

....
                    <div class="control">
                        <div class="icons-sign"><img class="iconbutton-img" src="<?php echo $this->getViewFileUrl("images/maillogin.png") ?>"></div>
                        <input name="login[username]" placeholder="Email" value="<?= $block->escapeHtmlAttr($block->getUsername()) ?>"
                            <?php if ($block->isAutocompleteDisabled()): ?> autocomplete="off"<?php endif; ?>
                               id="email" type="email" class="input-text"
                               title="<?= $block->escapeHtmlAttr(__('Email')) ?>"
                               data-mage-init='{"mage/trim-input":{}}'
                               data-validate="{required:true, 'validate-email':true}">
.....

CSS:

.icons-sign {
    overflow: hidden;
    /* padding: 10px; */
    padding-top: 15px;
    padding-left: 15px;
    position: absolute;
    z-index: 999;
}
.iconbutton-img{
    top: 56px;
    left: 9px;
}

Like this we can add images to input fields.