Sometimes we need an optional Drop-down box to select the content, but there is a need to customize the input. For this requirement, most sites use a drop-down box and an input text, a parallel or a branch to give a choice. So what do we want it to look like a drop-down box that can be entered or chosen?
In fact, we can use CSS position positioning and a little bit of JavaScript code to simulate this effect.
Copy Code code as follows:
<! DOCTYPE html>
<title> editable Drop-down box with selectable </title>
<meta charset= "Utf-8" >
<style>
. list-name-input{
Color: #333;
Font-family:tahoma, ' Microsoft Yahei ', ' Segoe UI ', Arial, ' Microsoft Yahei ', SimSun, Sans-serif;
font-size:15px;
Font-weight:bold;
height:50px;
margin:0px;
padding:0px;
position:relative;
width:530px;
}
. list-name-for-select{
border:0;
Color: #555;
height:20px;
Lighting-color:rgb (255, 255, 255);
line-height:20px;
margin:0 0 10px 0;
Outline-color: #555;
outline-offset:0px;
Outline-style:none;
outline-width:0px;
PADDING:4PX 6px;
Position:absolute;
top:1px;
left:3px;
Vertical-align:middle;
width:486px;
}
. list-name-input-for-select:focus{
border:0;
border-radius:0;
}
. list-select{
Background-color: #FFF;
border:1px #ccc Solid;
border-radius:4px;
Color: #555;
Cursor:pointer;
height:30px;
left:0px;
margin:0 0 10px 0;
PADDING:4PX 6px;
Position:absolute;
top:0px;
Vertical-align:middle;
White-space:pre;
width:530px;
}
</style>
<body>
<div id= "List-name-input" class= "List-name-input" >
<select type= "text" class= "List-select" id= "List-select" >
<option value= "" >
New
</option>
<option value= "0" >
10-ngcfg-update-1000
</option>
<option value= "1" >
11-ngcfg-update-1000
</option>
<option value= "2" >
111
</option>
<option value= "3" >
12-ngcfg-update-1000
</option>
<option value= "4" >
13-ngcfg-update-1000
</option>
<option value= "5" >
14-ngcfg-update-1000
</option>
<option value= "6" >
15-ngcfg-update-1000
</option>
<option value= "7" >
16-ngcfg-update-1000
</option>
<option value= "8" >
17-ngcfg-update-1000
</option>
<option value= "9" >
18-ngcfg-update-1257
</option>
<option value= "Ten" >
2-ngcfg-update-100
</option>
<option value= "One" >
3-ngcfg-update-150
</option>
<option value= ">"
4-ngcfg-update-200
</option>
<option value= ">"
5-ngcg-update-250
</option>
<option value= ">"
6-ngcfg-update-418
</option>
<option value= ">"
7-ngcfg-update-500
</option>
<option value= ">"
8-ngcfg-update-1000
</option>
<option value= ">"
9-ngcfg-update-1000
</option>
<option value= ">"
@ALL
</option>
<option value= ">"
@CNC-bj-4
</option>
<option value= ">"
cnc-bj--Test
</option>
<option value= ">"
Test
</option>
</select>
<input type= "text" class= "name Item-width list-name-for-select" id= "List-name-for-select" >
</div>
<script>
var listname = document.getElementById (' List-name-for-select ');
var listselect = document.getElementById (' List-select '). onchange = function (e) {
Console.log (This)
if (this.value) {
Listname.value = This.value + ' | ' + This.options[this.selectedindex].text;
}else{
Listname.value = ' '
}
};
</script>
</body>