Jquery attr() - Mozilla behaves differently regarding the design (differenty font-family or font-size?)

Question

I'm doing the login form.

This is my view in CodeIgnitor:

<div id="login-form">
<?php
    echo heading('Login', 2);
    echo form_open('login/login_user');
    echo form_input('email', set_value('email', 'Email Address'));
    echo br();
    echo form_password('password', '', 'placeholder="Password" class="password"');
    echo br(2);
    echo form_submit('submit', 'Login');
    echo form_close();
    echo validation_errors('<p class="error">');
    ?>
</div>

With JavaScript I try to ensure the following functionality:

If a user clicks on the passoword field this field gets empty (ready for the user to write in his/her password). If the user does not write his/her password and clicks somewhere else, the passowrd field gets the placeholder Password again.

This is the JavaScript code that does it:

$(':password').focusin(function(){
    if ($(this).attr('placeholder') !== undefined){
        $(this).removeAttr('placeholder')
    }
});

$(':password.password').focusout(function(){
    $(this).attr('placeholder', 'Password');
})

There is also a CSS that controls the color of the placeholder string (it makes it the same color as input field has it, in my case #999999).

input[type=text],
input[type=password] {
    display: block;
    padding: 3%;
    color: #999999;
    margin: 0 0 1% 0;
    width: 90%;
    border: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: #202020;
}

::-webkit-input-placeholder {
   color: #999999;
}

:-moz-placeholder { /* Firefox 18- */
   color: #999999;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #999999;
}

:-ms-input-placeholder {  
    color: #999999;  
}

THE PROBLEM IS that all this (the e-mail and passowrd field look the same) works fine in Chrome and IE10, but in Mozilla they look differently. The color is the same, but the letters of the password filed seem to be smaller or different font, therefore the two fields look different and its ugly.

Any idea why Mozilla behaves differently regarding the design (the JS functionality, remowing the placeholder and placing it again works fine)?

Thanks ...

... And here is the DEMO .

Unfortunatelly I'm not able to set JS functionality here (so that when user clicks, the password fied would get empty. neverthelss, my problem is visible, if you check this DEMO out in Mozilla nad for example Chrome.

Answer 1

Thanks, a lot, but my main question is why in Mozilla the word "Passowrd" looks lighter than the word "Email Address", while in for example Chrome, both words look the same. Please check out the DEMO

Because email is set with value and the password is a placeholder.

    <input 
        type="text" 
        name="email" 
        value="Email Address"/>  <--------- Value
    <input 
        type="password" 
        name="password" 
        value=""         
        placeholder="Password" <--------- Placeholder
        class="password"/>

The email's text color should be the default color of the textbox.