материализовать поля ввода метки сливающихся

Question

У меня есть как часть формы этой контактной информации в разделе:

<div class="row"> 
<div class="col s12"> 
    <i class="material-icons prefix">account_circle</i> 
    <input id="nameico" type="text" class="validate"> 
    <label for="nameico">Contact Name</label> 
</div> 
<div class="col s12"> 
    <i class="material-icons prefix">email</i> 
    <input id="emailico" type="email" class="validate"> 
    <label for="emailico">Contact Email</label> 
</div> 
<div class="col s12"> 
    <i class="material-icons prefix">phone</i> 
    <input id="telico" type="tel" class="validate"> 
    <label for="telico">Contact Phone</label> 
</div> 
</div> 

Однако все три этикетки накладываются друг на друга все внутри первого поля ввода для имени лиц.

Answer 1

Вот мой код может быть, это может помочь вам.

JSFiddle ссылка - JSFiddle

HTML код -

<div class="row"> 
<div class="col s12 input-field"> 
    <i class="material-icons prefix">account_circle</i> 
    <input id="nameico" type="text" class="validate"> 
    <label for="nameico">Contact Name</label> 
</div> 
<div class="col s12 input-field"> 
    <i class="material-icons prefix">email</i> 
    <input id="emailico" type="email" class="validate"> 
    <label for="emailico">Contact Email</label> 
</div> 
<div class="col s12 input-field"> 
    <i class="material-icons prefix">phone</i> 
    <input id="telico" type="tel" class="validate"> 
    <label for="telico">Contact Phone</label> 
</div> 
</div>