Password not visibile in the input(works fine in chrome) not in firefox

Question

I'm creating a drop down checkbox for password validation.I've changed the background for the input on focusing it.But,The password is not displayed in the black color discs in the input even after specifying styles for it.Codes:

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

$("#Password").click(function() {
  document.getElementById("myDropdown").classList.toggle("show");
});

$("#Password").keyup(function() {
  var input = $(this).val();

  $("#oneCharacter").attr('checked', hasLetters(input));
  $("#oneNumber").attr('checked', hasNumbers(input));
  $("#strongPassword").attr('checked', isStrong(input));
});

var isStrong = function(input) {
  if (input.length > 8 && input.length < 16)
    return true;
};

var hasLetters = function(input) {
  return input.match(/[a-zA-Z]/);
};

var hasNumbers = function(input) {
  return input.match(/[0-9]/);
};

var hasSymbols = function(input) {
  return true;
};

var containsNoInvalidInput = function(input) {
  return true;
};

body {
  margin: 4%;
}

.dropbtn {
  background-color: white;
  padding: 16px;
  font-size: 16px;
  border: 2px solid #ccc;
  cursor: pointer;
  height: 0px;
  margin-bottom: 10px;
  width: inherit;
  border: 2px solid;
  border-radius: 5px;
}

input[type="password"] {
  -webkit-text-security: disc;
  color: black;
}

.dropbtn:hover,
.dropbtn:focus {
  border: 2px solid #A0392F;
  background-color: #F7DDD8;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  padding-left: 40px;
  width: inherit;
  overflow: hidden;
  border: 2px solid;
  margin-top: -10px;
  font-size: 20px;
  padding: 30px;
  border-top: #B36F7A;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #f1f1f1
}

.squaredFour {
  width: 20px;
  position: relative;
  margin: 20px auto;
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.5;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked+label:after {
      opacity: 1;
    }
  }
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div class="row">
  <div class="col-md-6" style="text-align:left;">
    <span style="font-weight: 900;font-size: 25px;">New Password</span>
  </div>

  <div class="row">
    <div class="col-md-12">
      <input type="password" id="Password" class="dropbtn">
      <div id="myDropdown" class="dropdown-content">
        <div class="row" style="text-align:left;"> <input type="checkbox" id="strongPassword" name="check" class="checkboxValid" /> <label for="squaredFour">8 - 16 characters long</label></div>
        <div class="row" style="text-align:left;"> <input type="checkbox" id="oneCharacter" name="check" class="checkboxValid" /> <label for="squaredFour">At least one letter</label></div>
        <div class="row" style="text-align:left;"> <input type="checkbox" id="oneNumber" name="check" class="checkboxValid" /> <label for="squaredFour">At least one number</label></div>
        <div class="row" style="text-align:left;"> <input type="checkbox" id="oneSymbol" name="check" class="checkboxValid" /> <label for="squaredFour">At least one symbol</label></div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4" style="text-align: right;">
      Confirm Password
    </div>
    <div class="col-md-4">
      <input type="password" id="" class="">
    </div>
  </div>

Answer 1

You have to change the style as well. Check the below code

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body{
margin: 4%;
}
.dropbtn {
    background-color: white;
  
    padding: 16px;
    font-size: 16px;
    border: 2px solid #ccc;
    cursor: pointer;
	height: 60px;
margin-bottom: 10px;
width: inherit;
border: 2px solid;
border-radius: 5px;


}
input[type="text"]
{
  color:black;
}
.dropbtn:hover, .dropbtn:focus {
  border: 2px solid #A0392F;
  background-color:#F7DDD8;

  
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {

position: absolute;
background-color: #f9f9f9;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
padding-left: 40px;
width: inherit;
overflow: hidden;
border: 2px solid;
margin-top: -10px;
font-size: 20px;
padding: 30px;
border-top:#B36F7A;
}


.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}
.squaredFour {
  width: 20px;
  position: relative;
  margin: 20px auto;
  label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: #fcfff4;
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    &:after {
      content: '';
      width: 9px;
      height: 5px;
      position: absolute;
      top: 4px;
      left: 4px;
      border: 3px solid #333;
      border-top: none;
      border-right: none;
      background: transparent;
      opacity: 0;
      transform: rotate(-45deg);
    }
    &:hover::after {
      opacity: 0.5;
    }
  }
  input[type=checkbox] {
    visibility: hidden;
    &:checked + label:after {
      opacity: 1;
    }
  }    
}

</style>
</head>
<body>

<div class="row">
<div class="col-md-6" style="text-align:left;">
<span style="font-weight: 900;font-size: 25px;">New Password</span>
</div>

<div class="row">
<div class="col-md-12">
<input type="text" id="Password" class="dropbtn">
  <div id="myDropdown" class="dropdown-content" >
<div class="row" style="text-align:left;"> <input type="checkbox" id="strongPassword" name="check" class="checkboxValid" /> <label for="squaredFour">8 - 16 characters long</label></div>
<div class="row" style="text-align:left;"> <input type="checkbox" id="oneCharacter" name="check" class="checkboxValid" /> <label for="squaredFour">At least one letter</label></div>
<div class="row" style="text-align:left;"> <input type="checkbox" id="oneNumber" name="check" class="checkboxValid" /> <label for="squaredFour">At least one number</label></div>
<div class="row" style="text-align:left;"> <input type="checkbox" id="oneSymbol" name="check" class="checkboxValid" /> <label for="squaredFour">At least one symbol</label></div>
</div>
</div>
</div>

<div class="row">
<div class="col-md-4" style="text-align: right;">
Confirm Password 
</div>
<div class="col-md-4">
<input type="text" id="" class="">
</div>
</div>
<script>

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

$("#Password").click(function() {
  document.getElementById("myDropdown").classList.toggle("show");
});

$("#Password").keyup(function() {
  var input = $(this).val();
  
  $("#oneCharacter").attr('checked', hasLetters(input));
  $("#oneNumber").attr('checked', hasNumbers(input));
  $("#strongPassword").attr('checked', isStrong(input));
});

var isStrong = function(input){
    if(input.length > 8 && input.length < 16)
	return true;
};

var hasLetters = function(input){
    return input.match(/[a-zA-Z]/);
};

var hasNumbers = function(input){
    return input.match(/[0-9]/);
};

var hasSymbols = function(input){
    return true;
};

var containsNoInvalidInput = function(input){
    return true;
};
</script>

</body>
</html>

Answer 2

Just change input type to text if you want the password to be visible but if you want discs leave as type="password". The problem in firefox is because of the height you have set. See the updated codesnippet.

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    body {
      margin: 4%;
    }
    
    .dropbtn {
      background-color: white;
      padding: 10px;
      font-size: 16px;
      border: 2px solid #ccc;
      cursor: pointer;
      height: auto;
      margin-bottom: 10px;
      width: inherit;
      border: 2px solid;
      border-radius: 5px;
    }
    
    input[type="password"] {
      -webkit-text-security: disc;
      color: black;
    }
    
    .dropbtn:hover,
    .dropbtn:focus {
      border: 2px solid #A0392F;
      background-color: #F7DDD8;
    }
    
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      position: absolute;
      background-color: #f9f9f9;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
      padding-left: 40px;
      width: inherit;
      overflow: hidden;
      border: 2px solid;
      margin-top: -10px;
      font-size: 20px;
      padding: 30px;
      border-top: #B36F7A;
    }
    
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    
    .dropdown a:hover {
      background-color: #f1f1f1
    }
    
    .squaredFour {
      width: 20px;
      position: relative;
      margin: 20px auto;
      label {
        width: 20px;
        height: 20px;
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        background: #fcfff4;
        background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
        border-radius: 4px;
        box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
        &:after {
          content: '';
          width: 9px;
          height: 5px;
          position: absolute;
          top: 4px;
          left: 4px;
          border: 3px solid #333;
          border-top: none;
          border-right: none;
          background: transparent;
          opacity: 0;
          transform: rotate(-45deg);
        }
        &:hover::after {
          opacity: 0.5;
        }
      }
      input[type=checkbox] {
        visibility: hidden;
        &:checked+label:after {
          opacity: 1;
        }
      }
    }
  </style>
</head>

<body>

  <div class="row">
    <div class="col-md-6" style="text-align:left;">
      <span style="font-weight: 900;font-size: 25px;">New Password</span>
    </div>

    <div class="row">
      <div class="col-md-12">
        <input type="password" id="Password" class="dropbtn">
        <div id="myDropdown" class="dropdown-content">
          <div class="row" style="text-align:left;"> <input type="checkbox" id="strongPassword" name="check" class="checkboxValid" /> <label for="squaredFour">8 - 16 characters long</label></div>
          <div class="row" style="text-align:left;"> <input type="checkbox" id="oneCharacter" name="check" class="checkboxValid" /> <label for="squaredFour">At least one letter</label></div>
          <div class="row" style="text-align:left;"> <input type="checkbox" id="oneNumber" name="check" class="checkboxValid" /> <label for="squaredFour">At least one number</label></div>
          <div class="row" style="text-align:left;"> <input type="checkbox" id="oneSymbol" name="check" class="checkboxValid" /> <label for="squaredFour">At least one symbol</label></div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-md-4" style="text-align: right;">
        Confirm Password
      </div>
      <div class="col-md-4">
        <input type="password" id="" class="">
      </div>
    </div>
    <script>
      window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {
          var dropdowns = document.getElementsByClassName("dropdown-content");
          var i;
          for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('show')) {
              openDropdown.classList.remove('show');
            }
          }
        }
      }

      $("#Password").click(function() {
        document.getElementById("myDropdown").classList.toggle("show");
      });

      $("#Password").keyup(function() {
        var input = $(this).val();

        $("#oneCharacter").attr('checked', hasLetters(input));
        $("#oneNumber").attr('checked', hasNumbers(input));
        $("#strongPassword").attr('checked', isStrong(input));
      });

      var isStrong = function(input) {
        if (input.length > 8 && input.length < 16)
          return true;
      };

      var hasLetters = function(input) {
        return input.match(/[a-zA-Z]/);
      };

      var hasNumbers = function(input) {
        return input.match(/[0-9]/);
      };

      var hasSymbols = function(input) {
        return true;
      };

      var containsNoInvalidInput = function(input) {
        return true;
      };
    </script>

</body>

</html>