[HTML] 수정가능한 SELECT 태그(Editable 'Select' element)

[HTML] 수정가능한 SELECT 태그 소스(Editable 'Select' element)

<style>
  .select-editable { position:relative; background-color:white; border:solid grey 1px;  width:120px; height:18px; }
  .select-editable select { position:absolute; top:0px; left:0px; font-size:14px; border:none; width:120px; margin:0; }
  .select-editable input { position:absolute; top:0px; left:0px; width:100px; padding:1px; font-size:12px; border:none; }
  .select-editable select:focus, .select-editable input:focus { outline:none; }
</style>

<div class="select-editable">
  <select onchange="this.nextElementSibling.value=this.value">
    <option value=""></option>
    <option value="115x175 mm">115x175 mm</option>
    <option value="120x160 mm">120x160 mm</option>
    <option value="120x287 mm">120x287 mm</option>
  </select>
  <input type="text" name="format" value=""/>
</div>

실행결과

위의 소스코드를 실행하면 아래와 같이 나옵니다.

익스플로러 10 에서 테스트한 화면입니다.

출처 : http://stackoverflow.com/questions/2141357/editable-select-element