파일 입력 버튼을 사용자 정의하고 HTML에서 텍스트 상자를 숨기는 방법은 무엇입니까?
- Patricia Arquette원래의
- 2024-11-01 16:51:02804검색
스타일 지정 방법 텍스트 상자를 숨기고 버튼만 표시하려면
특히 텍스트 상자를 숨기고 버튼만 표시하려고 할 때 어려울 수 있습니다.
CSS 솔루션
CSS를 사용하여 원하는 효과를 얻으려면 다음 코드를 고려하세요.
<code class="html"><html>
<style type="text/css">
div.fileinputs {
position: relative;
}
div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
div.fakefile input[type=button] {
/* enough width to completely overlap the real hidden file control */
cursor: pointer;
width: 148px;
}
div.fileinputs input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
<div class="fileinputs">
<input type="file" class="file" />
<div class="fakefile">
<input type="button" value="Select file" />
</div>
</div>
</html></code>
이 CSS 코드는 실제 파일 입력과 겹치는 가짜 파일 버튼을 생성하고 불투명도: 0;을 사용하여 텍스트 상자를 숨깁니다.
위 내용은 파일 입력 버튼을 사용자 정의하고 HTML에서 텍스트 상자를 숨기는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.