Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
<head>
<meta name="description" content="Combobox with select, input and a custom arrow">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Combobox with select, input and a custom arrow</title>
</head>
<body>
​
<a href="https://stackoverflow.com/questions/2141357/editable-select-element/11898865#11898865">Editable 'Select' element</a>
​
<div class="example">
    <!-- mandatory benefits/social security/welfare -->
    <div class="combobox"><div>
        <select id=MandatoryBenefits onchange="this.nextElementSibling.value=this.value" required>
            <option value="" selected>Select ...</option>
            <option value="Pension">Pension %</option>
            <option value="Medical">Medical %</option>
            <option value="Unemployment">Unemployment %</option>
            <option value="Injury">Injury %</option>
            <option value="Maternity">Maternity %</option>
            <option value="Serious Illness">Serious Illness %</option>
            <option value="Housing Fund">Housing Fund %</option>
        </select>
        <input type="text" value="" onchange="this.previousElementSibling.selectedIndex=0"
            oninput="this.previousElementSibling.options[0].value=this.value; this.previousElementSibling.options[0].innerHTML=this.value" />
    </div></div>
</div>
​
<div class="example">
    <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" oninput="this.previousElementSibling.options[0].value=this.value; this.previousElementSibling.options[0].innerHTML=this.value" onchange="this.previousElementSibling.selectedIndex=0" value="" />
    </div>
</div>
  
<div class="example">
    <!-- mandatory benefits/social security/welfare -->
    <div class="combobox2"><div>
        <select onchange="this.nextElementSibling.value=this.value" required>
            <option value="" selected>Select ...</option>
            <option value="Pension">Pension %</option>
            <option value="Medical">Medical %</option>
            <option value="Unemployment">Unemployment %</option>
            <option value="Injury">Injury %</option>
            <option value="Maternity">Maternity %</option>
            <option value="Serious Illness">Serious Illness %</option>
            <option value="Housing Fund">Housing Fund %</option>
        </select>
        <input type="text" value="" onchange="this.previousElementSibling.selectedIndex=-1" />
    </div></div>
</div>
​
<div class="example">
    <!-- mandatory benefits/social security/welfare -->
    <div class="combobox3"><div>
        <select onchange="this.nextElementSibling.value=this.value" required>
            <option value="" selected>Select ...</option>
            <option value="Pension">Pension %</option>
            <option value="Medical">Medical %</option>
            <option value="Unemployment">Unemployment %</option>
            <option value="Injury">Injury %</option>
            <option value="Maternity">Maternity %</option>
            <option value="Serious Illness">Serious Illness %</option>
            <option value="Housing Fund">Housing Fund %</option>
        </select>
        <input type="text" value="" onchange="this.previousElementSibling.selectedIndex=-1" />
    </div></div>
</div>
​
​
<div class="better example">
    <!-- mandatory benefits/social security/welfare -->
    <div class="combobox-better"><div>
        <select onchange="this.nextElementSibling.value=this.value" required>
            <option value="" selected>Select ...</option>
            <option value="Pension">Pension %</option>
            <option value="Medical">Medical %</option>
            <option value="Unemployment">Unemployment %</option>
            <option value="Injury">Injury %</option>
            <option value="Maternity">Maternity %</option>
            <option value="Serious Illness">Serious Illness %</option>
            <option value="Housing Fund">Housing Fund %</option>
        </select>
        <input type="text" value="" onchange="this.previousElementSibling.selectedIndex=-1" />
    </div></div>
</div>
​
<select style="border:1px solid blueviolet;">
    <option value=""></option>
    <option value="cpp">C++</option>
    <option value="java">Java</option>
    <option value="js">JavaScript</option>
</select>
​
<p><div class="input-arrow-wrapper"><input></div></p>
​
<input class="input-with-arrow">
<svg width="32" height="32" preserveAspectRatio="none" style="border:1px solid black">
    <path d="M5,10 16,22 27,10" fill="none" stroke="black" stroke-linecap="round" stroke-width="1" />
</svg>
​
<p>
<a href="https://jsbin.com/tuzodow/edit?html,css,output">online demo @jsbin.com</a>
<a href="https://codepen.io/kekkou/pen/BaLGRRK">online demo @codepen.io</a>
</p>
​
</body>
</html>
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
ssfangpro
0viewers