@collab-ui/core/scss/components/editable-textfield/examples/default.html

Cisco Collab UI CSS Framework

  <!-- unfocussed state -->
  <span class="cui-editable-textfield cui-editable-textfield--left">
    <div role="button" class="cui-editable-textfield__button">Hello World</div>
  </span>
  <!-- button div is replaced by input when focused -->
  <span class="cui-editable-textfield cui-editable-textfield--left">
    <div class="cui-input-group cui-editable-textfield__editing">
      <input class="cui-input" type="text" value="Hello World">
    </div>
  </span>