Ввод стилей неисправностей в пределах диапазона как одного элемента

Question

В моем приложении на Rails 3 есть форма, которая использует span в качестве заполнителей, расположенных внутри полей input в divs.Для большинства полей формы структура выглядит следующим образом:

<div class="holds">
  <span class="holder">Placeholder</span>
  <input>Input</input
</div>

Однако в одном поле я хочу, чтобы фактический input был обернут в текст, чтобы поле input отображалось как заполнение пробела.,Таким образом, визуализированный HTML-код будет выглядеть примерно так:

<div><span>It is supposed to <input id="foo" placeholder="ex: rain"> today</span></div>

Однако у меня возникают проблемы с стилизацией этого конкретного div, чтобы он был однородным.Я хотел бы, чтобы div:

• Имел одну единую границу вокруг span и input, но не имел границ внутри span слева и справа от input.(Смотрите ниже в моем jsFiddle, что у меня явно нет этого исправления.)
• Сфокусируйте весь div, когда фокусируется input.(Я попытался сделать это в моем jsFiddle ниже, но мой статус новичка ограничил меня.)
• В идеале, я бы также поместил курсор внутри ввода, если щелкнуть span.Однако это не высокий приоритет.

Вот ссылка на мою jsFiddle .Кто-нибудь может мне помочь?

Answer 1

эта демонстрация делает то, что вы хотите: http://jsfiddle.net/jalbertbowdenii/akCsP/2/

Я заменил div на метку, одно из преимуществ правильного использования элементов - поведение агента пользователя по умолчанию: фокусировка на метке автоматически фокусируется на связанном элементе управления формой, в данном случае вводом.

не был уверен в том, как вам нужен стиль div на фокусе, поэтому я просто использовал стили фокуса ввода