input[type='file'] 스타일 사용자 정의-HTML 튜토리얼-php.cn

input[type='file'] 스타일 사용자 정의

WBOY

풀어 주다： 2016-09-27 14:05:24

원래의

1033명이 탐색했습니다.

input[type="file"] 스타일은 다양한 브라우저에서 다르게 동작합니다.

1.크롬:

2. 파이어폭스:

3. 오페라:

4.ie:

5. 가장자리:

또한 input[type="file"]의 높이를 지정하고 줄 높이를 높이와 동일하게 설정하면 보기 흉한 스타일이 크롬에 나타납니다.

'선택한 파일 없음' 줄이 세로 중앙에 위치하지 않습니다.

Firefox를 사용하는 것이 더 나은 것 같습니다. 음, 저는 Firefox를 사용하는 것을 선호합니다. 그러나 이러한 브라우저의 성능은 일관성이 없으므로 호환성 처리를 수행해야 합니다.

사물:

1. 브라우저 중 하나와 유사한 스타일을 사용자 정의하여 하위 레이어에 배치합니다.

2. 브라우저 자체에 표시되는 스타일을 "숨기고" opacity: 0을 상위 레이어에 배치하여 input[type="file"]이 응답하는 이벤트가 되도록 합니다.

3. 파일을 선택하거나 파일을 변경한 후 표시되는 파일의 값을 변경합니다.

코드:

html:
<form action="" class="activityForm">
　　<div class="file">
	<label for="file">文件：</label>
	<div class="userdefined-file">
	　　<input type="text" name="userdefinedFile" id="userdefinedFile" value="未选择任何文件">
	　　<button type="button">上传</button>
	</div>
	<input type="file" name="file" id="file">			
　　</div>
</form>

로그인 후 복사

css: 
.file {
　　position: relative;
　　height: 40px;
　　line-height: 40px;
}
.file label {
　　display: inline-block;
}
.userdefined-file {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 2;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　font-size: 0;  /*应对子元素为 inline-block 引起的外边距*/
}
.userdefined-file input[type="text"] {
　　display: inline-block;
　　vertical-align: middle;
　　padding-right: 14px;
　　padding-left: 14px;
　　width: 220px;
　　box-sizing: border-box;
　　border: 1px solid #ccc;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　overflow: hidden;
　　text-overflow: ellipsis;
　　white-space: nowrap;
}
.userdefined-file button {
　　display: inline-block;
　　vertical-align: middle;
　　width: 80px;
　　text-align: center;
　　height: 40px;
　　line-height: 40px;
　　font-size: 14px;
　　background-color: #f54;
　　border: none;
　　color: #fff;
　　cursor: pointer;
}
.file input[type="file"] {
　　position: absolute;
　　top: 0;
　　left: 60px;
　　z-index: 3;
　　opacity: 0;
　　width: 300px;
　　height: 40px;
　　line-height: 40px;
　　cursor: pointer;
}

로그인 후 복사

js:
document.getElementById("file").onchange = function() {
    document.getElementById("userdefinedFile").value = document.getElementById("file").value;
}

로그인 후 복사

이런 방식으로 처리한 후에는 다양한 브라우저에서 성능이 일관됩니다.

1. Chrome에서 파일을 선택하지 않은 경우: