Firefox 和 Internet Explorer 上 css 中子元素的定位问题

Question

I'm trying to properly position the toggle eye of the password field using CSS.The problem is the positioning works well in google chrome but it's not working in firefox and ie.I tried to figure out the solution but being a beginner in web development I didn't get a solution. Please help me to figure out the solution.

My HTML part

        <div id="password">
            <label for="pwd">Password</label>
            <div>
                <input type="password" id="pwd" name="pass_word" autocomplete="off" maxlength="12" value="<?php echo $pwd; ?>">
                <span class="icon"><i id="show-pwd" class="far fa-eye hide"></i></span>
                <span class="icon"><i id="hide-pwd" class="far fa-eye-slash"></i></span>
            </div>
            <div id="perr" class="err"><?php echo $pwderr; ?></div>
        </div>

        <div id="confirm-password">
            <label for="cnfpwd">Confirm Password</label>
            <div>
                <input type="password" id="cnfpwd" name="cnf_pwd" autocomplete="off" maxlength="12" value="<?php echo $cpwd; ?>">
                <span class="icon"><i id="show-cnfpwd" class="far fa-eye hide"></i></span>
                <span class="icon"><i id="hide-cnfpwd" class="far fa-eye-slash"></i></span>
            </div>
            <div id="cperr" class="err"><?php echo $cpwderr; ?></div>
        </div>

My CSS part

.confirm-password{
    position: relative;
}

.icon{
    position: absolute;
    transform: translate3d(-140%,40%,0);
    color: #555;
}

The first image shows how it looks in chrome and the second shows how it looks in firefox.

Answer 1

Your div has an ID of confirm-password but your CSS rule is for a class: .confirm-password . Change . to # and your div will now have position: relative assigned to it.