때로는 콘텐츠를 선택하려면 선택적인 드롭 다운 상자가 필요하지만 입력을 사용자 정의해야합니다. 이 요구 사항을 위해 대부분의 웹 사이트는 드롭 다운 상자와 입력 텍스트를 사용하고 병렬 또는 분기에서 선택을 제공합니다. 따라서 입력하거나 선택할 수있는 드롭 다운 상자처럼 보이기를 원합니다. 어떻게해야합니까?
실제로 CSS 포지셔닝 및 약간의 JavaScript 코드를 통해이 효과를 시뮬레이션 할 수 있습니다.
코드 사본은 다음과 같습니다.
<! doctype html>
<html>
<헤드>
<title> 편집 가능하고 선택 가능한 드롭 다운 상자 </title>
<meta charset = "utf-8">
<스타일>
.list-name 입력 {
색상 : #333;
Font-Family : Tahoma, 'Microsoft Yahei', 'Segoe Ui', Arial, 'Microsoft Yahei', Simsun, Sans-Serif;
글꼴 크기 : 15px;
글꼴 중량 : 대담한;
높이 : 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;
Border-Radius : 4px;
색상 : #555;
커서 : 포인터;
높이 : 30px;
왼쪽 : 0px;
여백 : 0 0 10px 0;
패딩 : 4px 6px;
위치 : 절대;
상단 : 0px;
수직 정상 : 중간;
흰색 공간 : 사전;
너비 : 530px;
}
</스타일>
</head>
<body>
<div id = "list-name-input">
<select type = "text"id = "list-select">
<옵션 값 = "">
새로운
</옵션>
<옵션 값 = "0">
10-ngcfg-update-1000
</옵션>
<옵션 값 = "1">
11-ngcfg-update-1000
</옵션>
<옵션 값 = "2">
111
</옵션>
<옵션 값 = "3">
12-ngcfg-update-1000
</옵션>
<옵션 값 = "4">
13-ngcfg-update-1000
</옵션>
<옵션 값 = "5">
14-ngcfg-update-1000
</옵션>
<옵션 값 = "6">
15-ngcfg-update-1000
</옵션>
<옵션 값 = "7">
16-ngcfg-update-1000
</옵션>
<옵션 값 = "8">
17-ngcfg-update-1000
</옵션>
<옵션 값 = "9">
18-ngcfg-update-1257
</옵션>
<옵션 값 = "10">
2-ngcfg-update-100
</옵션>
<옵션 값 = "11">
3-ngcfg-update-150
</옵션>
<옵션 값 = "12">
4-ngcfg-update-200
</옵션>
<옵션 값 = "13">
5-NGCG-Update-250
</옵션>
<옵션 값 = "14">
6-ngcfg-update-418
</옵션>
<옵션 값 = "15">
7-NGCFG-UPDATE-500
</옵션>
<옵션 값 = "16">
8-ngcfg-update-1000
</옵션>
<옵션 값 = "17">
9-ngcfg-update-1000
</옵션>
<옵션 값 = "18">
@모두
</옵션>
<옵션 값 = "19">
@CNC-BJ-4
</옵션>
<옵션 값 = "20">
CNC-BJ- 테스트
</옵션>
<옵션 값 = "21">
시험
</옵션>
</선택>
<입력 유형 = "텍스트"id = "list-name-for-select">
</div>
<cript>
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 = ''
}
};
</스크립트>
</body>
</html>