Search holder

HTML

<form action="#" class="search">
  <fieldset>
    <div class="input-holder">
      <span class="paceholder">qwerty qwerty « <i>abcd</i> »</span>
      <input type="text" />
    </div>
    <input class="srch-btn" type="submit" value="" />
  </fieldset>
  <fieldset class="input-row" data-sf-role="multiple-choice-field-container">
    <div class="input-col input-label">
      <input data-sf-role="violation-messages" value="{ &quot;required&quot;: &quot;This field is required&quot;}" type="hidden">

      <legend>Did you speak to any staff for any reason?</legend>
    </div>

    <div class="input-col input-field">
      <div class="radio">
        <label>
          <input name="MultipleChoiceFieldController_2" value="Yes" data-sf-role="multiple-choice-field-input" required="required" type="radio"> Yes
        </label>
      </div>
      <div class="radio">
        <label>
          <input name="MultipleChoiceFieldController_2" value="No" data-sf-role="multiple-choice-field-input" required="required" type="radio"> No
        </label>
      </div>


    </div>
  </fieldset>
  <fieldset class="person_helpful_container input-row" data-sf-role="multiple-choice-field-container">
    <div class="input-col input-label">
      <input data-sf-role="violation-messages" value="{ &quot;required&quot;: &quot;This field is required&quot;}" type="hidden">

      <legend>If yes, was that person helpful?</legend>
    </div>

    <div class="input-col input-field">
      <div class="radio">
        <label>
          <input name="MultipleChoiceFieldController_3" value="Yes" data-sf-role="multiple-choice-field-input" type="radio"> Yes
        </label>
      </div>
      <div class="radio">
        <label>
          <input name="MultipleChoiceFieldController_3" value="No" data-sf-role="multiple-choice-field-input" type="radio"> No
        </label>
      </div>


    </div>
  </fieldset>
  <fieldset class="input-row" data-sf-role="multiple-choice-field-container">
    <div...

CSS

form.search {
  margin: 0 0 30px;
  position: relative;
}

form.search .input-holder {
  height: 1%;
  overflow: hidden;
  margin: 0 137px 0 0;
  position: relative;
  background: url(../images/srch-input.png) no-repeat;
  height: 34px;
  padding: 10px 20px 0 20px;
  font: 18px/21px Arial, Helvetica, sans-serif;
}

form.search .input-holder input {
  float: left;
  width: 100%;
  border: none;
  background: none;
  font: 18px/21px Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 5;
}

form.search .input-holder .paceholder {
  color: #84929c;
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 4;
}

form.search .input-holder .paceholder i {
  color: #006699;
  border-bottom: 1px dashed;
}

form.search .srch-btn {
  position: absolute;
  top: 0;
  right: 0;
  background: url(../images/srch-btn.png) no-repeat;
  width: 137px;
  height: 46px;
  cursor: pointer;
  border: none;
}

form.search .srch-btn:hover {
  background-position: 0 -46px;
}

form.search .parent-active .paceholder {
  left: -9999px;
}

JavaScript

$('form.search .input-holder input').focus(function() {
  var _title = $('form.search .input-holder .paceholder i').text();
  $(this).val(_title);
  $(this).parent().addClass("parent-active");
});
$('form.search .input-holder input').blur(function() {

  $(this).val('');
  $(this).parent().removeClass("parent-active");
});
$(document).ready(function() {
  $('.person_helpful_container').hide();
  $('.web_experience_container').hide();
  $('[name=MultipleChoiceFieldController_2]').change(function() {
    alert($(this).val());
  });
});