选择输入字段的前缀图标重叠内容物化

Question

我和我的团队目前正在开发一个需要注册表单的网络应用程序。 我们决定使用 Materialize 框架来简化前端的开发，但现在我们面临着一件非常不愉快的事情：我们所有选择字段的前缀图标都与字段重叠。

我们已经尝试关注我们在其他网站上发现的内容 - 显然，这是一个可能已经修复的已知问题。

这就是现在的代码：

M.AutoInit();

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>


<div class="container">
  <div class="row">
    <form class="col s12">
      <div class="row">

        <div class="input-field col s12">
          <i class="material-icons prefix">keyboard</i>
          <input id="code" type="text" class="validate" v-model="sponsor">
          <label for="code">Code Mairie</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">mail</i>
          <input id="email" type="text" class="validate" v-model="email">
          <label for="email">Email</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">vpn_key</i>
          <input id="password" type="password" class="validate" v-model="password">
          <label for="password">Mot de passe</label>
        </div>

        <div class="input-field col s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="last_name" type="text" class="validate" v-model="lastName">
          <label for="last_name">Nom</label>
        </div>

        <div class="input-field col s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="first_name" type="text" class="validate" v-model="firstName">
          <label for="first_name">Prénom</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">date_range</i>
          <input id="dob" type="text" class="datepicker">
          <label for="dob">Date de naissance</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">account_box</i>
          <select id="gender" v-model="gender">
            <option value="" disabled selected>Choisir votre sexe</option>
            <option value="1">Homme</option>
            <option value="2">Femme</option>
            <option value="3">Autre</option>
          </select>
          <label for="gender">Sexe</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">favorite</i>
          <select id="maritalSituation" v-model="maritalSituation">
            <option value="" disabled selected>Choisir votre situation</option>
            <option value="1">Célibataire</option>
            <option value="2">Concubinage</option>
            <option value="3">Marié(e)</option>
            <option value="4">Divorcé(e)</option>
            <option value="5">Veuf/Veuve</option>
          </select>
          <label for="maritalSituation">Situation maritale</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">work</i>
          <select id="professionalSituation" v-model="professionalSituation">
            <option value="" disabled selected>Choisir votre situation</option>
            <option value="1">Retraité(e)</option>
            <option value="2">Employé(e)</option>
            <option value="3">Sans Emploi</option>
          </select>
          <label for="professionalSituation">Situation Professionelle</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">local_phone</i>
          <input id="phone1" type="text" class="validate" v-model="phone">
          <label for="phone1">Téléphone 1</label>
        </div>
        <div class="input-field col s12">
          <i class="material-icons prefix">location_on</i>
          <input id="street" type="text" class="validate" v-model="street">
          <label for="street">Rue</label>
        </div>

        <div class="input-field col s4">
          <i class="material-icons prefix">location_on</i>
          <input id="postCode" type="text" class="validate" v-model="postalCode">
          <label for="postCode">Code postal</label>
        </div>

        <div class="input-field col s8">
          <i class="material-icons prefix">location_city</i>
          <input id="city" type="text" class="validate" v-model="city">
          <label for="city">Ville</label>
        </div>
      </div>
    </form>
    <a class="waves-effect waves-light btn col s10 offset-s1" @click="register">S'inscrire</a>
  </div>
</div>

如果你运行这个，你会看到结果和预期的一样。 但如果你看看这个screenshot，这就是我们在我们的应用程序上的结果。

我检查了所有版本并更新了所有内容，我们正在使用：
- materialize-css: ^1.0.0-rc2
-material-design-icons:^3.0.1

任何帮助弄清楚为什么会发生这种情况将不胜感激。

提前致谢！

Answer 1

最后我们发现错误来自添加到使文本居中的父 div（如上面的 6 或 7 个节点）的属性。
不过，奇怪的是这个错误只发生在select 输入字段中，但问题现在已经解决了。

给遇到相同问题的任何人的小提示：确保没有从父节点继承的属性 - 即使它可能很乏味 - 也会导致奇怪的显示。