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 websites use a drop-down box and an input text, which can be selected in parallel or by a branch. So what should we do if we want it to look like a drop-down box that can be input or selected?
In fact, we can simulate this effect through css position positioning and a little javascript code.
Copy codeThe Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Title> editable drop-down list </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>
</Head>
<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 = "10">
2-NGCFG-update-100
</Option>
<Option value = "11">
3-NGCFG-update-150
</Option>
<Option value = "12">
4-NGCFG-update-200
</Option>
<Option value = "13">
5-NGCG-update-250
</Option>
<Option value = "14">
6-NGCFG-update-418
</Option>
<Option value = "15">
7-NGCFG-update-500
</Option>
<Option value = "16">
8-NGCFG-update-1000
</Option>
<Option value = "17">
9-NGCFG-update-1000
</Option>
<Option value = "18">
@ ALL
</Option>
<Option value = "19">
@ CNC-BJ-4
</Option>
<Option value = "20">
CNC-BJ -- Test
</Option>
<Option value = "21">
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>
</Html>