입력타입 정의방법=파일스타일_HTML/Xhtml_웹페이지 제작

파일 제어를 아름답게 하는 이유는 무엇입니까? 상상해 보세요. 다른 아이들은 모두 단정하게 옷을 입고 아름답지만, 그 중 두 명은 당신을 무시하지 않습니다.

원본 파일 컨트롤은 다음과 같습니다.

이것이 텍스트와 버튼으로 구성되어 있다고 생각하지 마세요. 컨트롤입니다 , html 코드는

코드를 복사하세요 코드는 다음과 같습니다.

>
이 경우 텍스트와 버튼을 사용하여 이 파일의 스타일을 표시합니다.

코드 복사

코드는 다음과 같습니다:

< ;/form>
div>


div의 외부 레이어는 스타일을 작성할 때 상대적인 위치를 지정해야 하기 때문에 내부 입력에 대한 위치 참조를 제공합니다. 실제 파일 컨트롤은 시뮬레이션된 파일 컨트롤을 덮고 파일 컨트롤을 숨깁니다(파일 컨트롤이 표시되지 않더라도). 따라서 CSS 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

.file-box{ position:relative;width:340px}

.txt{ height: 22px; 테두리:1px 솔리드 #cdcdcd; 너비:180px;}

.btn{ 배경색:#FFF; 테두리:1px 솔리드 #CDCDCD;높이:24px;}
.file{ 위치 :절대값:0; 오른쪽:80px; 필터:알파(불투명도:0 );폭:260px }

렌더링:

마침내 데모를 떠났습니다. 데모를 보려면 클릭하세요.

본문{글꼴 크기:14px;} 입력{ 수직 정렬:중간; 여백:0; .file-box{ 위치:상대적;너비:340px} .txt{ 높이:22px; 테두리:1px 솔리드 #cdcdcd;} .btn{ 배경색:#FFF; 테두리:1px 단색 #CDCDCD;높이:24px;} .file{ 위치:절대; 상단:0; 높이:24px; 필터:알파(불투명도:0);불투명도: 0;폭:260px } 스타일> 머리>

양식>