In my Rails 3 application, I have created a form with placeholders using span tags inside input fields within divs. The structure for most of the form fields is as follows:
<div class="holds">
<span class="holder">Placeholder</span>
<input>Input</input
</div>
However, there is one field where I would like the actual input to be surrounded by text so that it resembles a fill-in-the-blank. The rendered HTML for this specific field should look something like this:
<div><span>It is supposed to <input id="foo" placeholder="ex: rain"> today</span></div>
My challenge lies in styling this particular div to maintain uniformity. Specifically, I want the div to:
- Have a consistent border around both the
spanandinput, but no borders inside thespanon the left and right of theinput. - Allow the entire
divto be focused when theinputis focused. - If possible, position the cursor inside the input field when the
spanis clicked (though this is not a top priority).
You can view my current progress on this issue in the following jsFiddle. Any assistance or guidance would be greatly appreciated.