Почему при клике на label в фокус берется первый input?

Question

[michellie]

При нажатии на любой Label в span фокусится первый input, почему так происходит? если нажимать на сам input то все ок.

<div class="main_blog_smm">
                <div class="hovereffect">
                    <img class="img-responsive" src="img/defolt.jpg" alt="{$row['name']}">
                    <div class="overlay">
                    <h5>Добавь себя</h5>
      <span>
    <input class="balloon" id="state" type="text" placeholder="Имя, Фамилия, or somethink" /><label for="state">Имя</label>
    <input class="balloon" id="state" type="text" placeholder="Должно быть хотбы 14" /><label for="state">Возраст</label>
    <input class="balloon" id="state" type="text" placeholder="250 например" /><label for="state">Прайс</label>
    <input class="balloon" id="state" type="text" placeholder="В любом формате" /><label for="state">Телефон</label>
    <input class="balloon" id="state" type="file"/><label for="state">Фото</label>

    <label><input class="radio" type="radio" checked name="dva"/> М</label> <label><input class="radio" type="radio" name="dva"/> Ж</label>
    <h6>Отправить  <i class="fa fa-address-book" aria-hidden="true"></i></h6>
  </span>
  

      </div>
            </div>
            </div>

.balloon {

  display: inline-block;
  width: 215px;
  padding: 5px 0 5px 15px;
  font-family: Roboto,sans;
  font-weight: 400;
  color: #377D6A;
  background: #efefef;
  border: 0;
  border-radius: 0px;
  outline: 0;
  text-indent: 60px;
  transition: all .3s ease-in-out;
}
.balloon::-webkit-input-placeholder {
  color: #efefef;
  text-indent: 0;
  font-weight: 300;
}
.balloon + label {
  display: block;
    position: absolute;
    padding: 5px 15px;
    color: #032429;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(19,74,70,0);
    transition: all .3s ease-in-out;
    border-radius: 0px;
    margin-top: -47px;
        margin-left: 3%;
    background: rgba(122,184,147,0);
    font-family: Roboto,sans;
  font-weight: 500;
  color: black;
}
.balloon + label:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  top: 100%;
  left: 50%;
  margin-left: -3px;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 3px solid rgba(122, 184, 147, 0);
  transition: all .3s ease-in-out;
}

.balloon:focus,
.balloon:active {
  color: #377D6A;
  text-indent: 0;
  background: #fff;
}
.balloon:focus::-webkit-input-placeholder,
.balloon:active::-webkit-input-placeholder {
  color: #aaa;
}
.balloon:focus + label,
.balloon:active + label {
font-family: Roboto,sans;
  font-weight: 500;
  color: black;
  background: @mk;
  transform: translateY(-30px);
}
.balloon:focus + label:after,
.balloon:active + label:after {
  border-top: 4px solid @mk;
}
.overlay span {
	display: inline-block;
	width: 100%;
}
.overlay input {

	font-family: Roboto,sans;
  font-weight: 400;
  width: 94%;

    margin-bottom: 22px;
}

Answer 1

[Александр]

Потому что label привязывается к id.
У вас у всех input id равен state.
Это неправильно. Id должны быть уникальными и не повторяющимися.

Label привязывается к id через атрибут for, например:

<label for="fio">Введите ФИО:</label>
<input type="text" id="fio" />

<label for="telephone">Введите номер:</label>
<input type="text" id="telephone" />

Comments

[michellie]

спасибо, совсем забыл про это (: