コンテンツを選択するにはオプションのドロップダウンボックスが必要な場合がありますが、入力をカスタマイズする必要もあります。この要件では、ほとんどのWebサイトはドロップダウンボックスと入力テキストを使用し、並列またはブランチで選択を提供します。それで、私たちはそれが入力または選択できるドロップダウンボックスのように見えることを望んでいます、それで私たちはそれをどのように行うのですか？
実際、CSSポジショニングと小さなJavaScriptコードを使用して、この効果をシミュレートできます。
コードコピーは次のとおりです。
<！doctype html>
<html>
<head>
<title>編集可能で選択可能なドロップダウンボックス</title>
<メタcharset = "utf-8">
<style>
.list-name-input {
色：＃333;
フォントファミリー：タホマ、「Microsoft Yahei」、「Segoe Ui」、Arial、「Microsoft Yahei」、Simsun、Sans-Serif;
フォントサイズ：15px;
font-weight：bold;
高さ：50px;
マージン：0px;
パディング：0px;
位置：相対;
幅：530px;
}
.list-name-for-select {
ボーダー：0;
色：＃555;
高さ：20px;
照明色：RGB（255、255、255）;
ラインハイト：20px;
マージン：0 0 10px 0;
アウトラインカラー：＃555;
アウトラインオフセット：0px;
アウトラインスタイル：なし;
アウトラインウィッド：0px;
パディング：4px 6px;
位置：絶対;
トップ：1px;
左：3px;
垂直アライイン：中央;
幅：486px;
}
.list-name-input-for-select：focus {
ボーダー：0;
ボーダーラジウス：0;
}
.list-select {
バックグラウンドカラー：#fff;
ボーダー：1px #ccc solid;
ボーダーラジウス：4px;
色：＃555;
カーソル：ポインター;
高さ：30px;
左：0px;
マージン：0 0 10px 0;
パディング：4px 6px;
位置：絶対;
上：0px;
垂直アライイン：中央;
ホワイトスペース：pre;
幅：530px;
}
</style>
</head>
<body>
<div id = "list-name-input">
<select type = "text" id = "list-select">
<オプション値= "">
新しい
</option>
<オプション値= "0">
10-ngcfg-update-1000
</option>
<オプション値= "1">
11-ngcfg-update-1000
</option>
<オプション値= "2">
111
</option>
<オプション値= "3">
12-ngcfg-update-1000
</option>
<オプション値= "4">
13-ngcfg-update-1000
</option>
<オプション値= "5">
14-ngcfg-update-1000
</option>
<オプション値= "6">
15-ngcfg-update-1000
</option>
<オプション値= "7">
16-ngcfg-update-1000
</option>
<オプション値= "8">
17-ngcfg-update-1000
</option>
<オプション値= "9">
18-ngcfg-update-1257
</option>
<オプション値= "10">
2-ngcfg-update-100
</option>
<オプション値= "11">
3-ngcfg-update-150
</option>
<オプション値= "12">
4-ngcfg-update-200
</option>
<オプション値= "13">
5-ngcg-update-250
</option>
<オプション値= "14">
6-ngcfg-update-418
</option>
<オプション値= "15">
7-ngcfg-update-500
</option>
<オプション値= "16">
8-ngcfg-update-1000
</option>
<オプション値= "17">
9-ngcfg-update-1000
</option>
<オプション値= "18">
@全て
</option>
<オプション値= "19">
@CNC-BJ-4
</option>
<オプション値= "20">
CNC-BJ-テスト
</option>
<オプション値= "21">
テスト
</option>
</select>
<入力型= "text" id = "list-name-for-select">
</div>
<スクリプト>
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;
}それ以外{
listname.value = ''
}
};
</script>
</body>
</html>