Select option text not fully visible?

Why is my select field's text partly invisible and not fully shown as same as the other fields I made? https://i.stack.imgur.com/tbfqm.png

I'm trying to make the text clear and not partly invisible. I tried to increase the height of that field and it worked, the text was fully visible, but I don't want that solution. I want that field to be the same height as the other fields I made. I appreciate if my fellow brothers could help me.

My HTML code:

<div class="form-div">

  <form class="" action="index.html" method="post">

    <div class="form-subdiv name-subdiv">
      <label class="name-label">Name</label>
      <input class="field name-field" type="text" name="" value="" placeholder="Enter your name">
    </div>

    <div class="form-subdiv email-subdiv">
      <label class="email-label">Email</label>
      <input class="field email-field" type="email" name="" value="" placeholder="Enter your email">
    </div>

    <div class="form-subdiv age-subdiv">
      <label class="age-label">Age (optional)</label>
      <input class="field age-field" type="number" name="" value="" placeholder="Age">
    </div>

    <div class="form-subdiv role-subdiv">
      <label class="role-label">Which option best describes your current role?</label>
      <select class="" name="">
        <option value="" selected disabled>Select current role</option>  <option value="">Studen</option>
        <option value="">Full Time Job</option>        <option value="">Full Time Learner</option>
        <option value="">Prefer Not To Say</option>    <option value="">Other</option>
      </select>
    </div>

Here is my CSS code:

/*///// Form /////*/
.form-div{
  width: 48%;
  height: 170vh;
  margin: auto;
  background-color: #2a2949;
  color: white;
  margin-top: 3%;
  font-family: 'Quicksand', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  overflow: auto;
}

form > *{
  display: block;
  /* outline: yellow solid thin; */
  width: 88%;
  margin: auto;
}

.form-subdiv > *{
  display: block;
}

.name-subdiv{
  margin-top: 5%;
}
.form-subdiv:not(.name-subdiv){
  margin-top: 4%;
}

.field,select{
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
  font-size: 1rem;
  margin-top: 1%;
  width: 100%;
  height: 2.5rem;
  border-radius: 7px;
  box-sizing: border-box;
  padding: 2%;
}