텍스트 상자를 숨기고 버튼만 표시하도록 `` 컨트롤을 사용자 정의하려면 어떻게 해야 합니까?

제어

많은 개발자가 기본 제어. 이 요소는 일반적으로 텍스트 상자와 버튼을 표시하지만 원하는 미학과 항상 일치하지 않을 수도 있습니다.

텍스트 상자 숨기기 및 버튼 유지

더 깔끔한 모양을 얻으려면 버튼만 표시하면 CSS 기술을 활용할 수 있습니다. 효과적인 솔루션은 다음과 같습니다.

CSS 코드:

<code class="css">/* Define the container div for positioning */
div.fileinputs {
  position: relative;
}

/* Style the fake file input that overlays the real one */
div.fakefile {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}

/* Customize the button in the fake file input */
div.fakefile input[type=button] {
  cursor: pointer;
  width: 148px;
}

/* Hide the real file input element */
div.fileinputs input.file {
  position: relative;
  text-align: right;
  -moz-opacity: 0;
  filter: alpha(opacity: 0);
  opacity: 0;
  z-index: 2;
}</code>

HTML 코드:

<code class="html"><div class="fileinputs">
  <input type="file" class="file" />

  <div class="fakefile">
    <input type="button" value="Select file" />
  </div>
</div></code>

설명:

이 CSS 및 HTML 코드는 요소를 배치하기 위한 div 컨테이너(.fileinputs)를 생성합니다. 이 컨테이너 내에서 실제 파일 입력(.file) 위에 나타나는 가짜 파일 입력 요소(.fakefile)를 추가합니다. 실제 입력의 불투명도를 0으로 설정하면 보이지 않게 됩니다. 그런 다음 가짜 파일 입력의 버튼을 너비와 커서 스타일로 맞춤 설정하여 기능과 유용성을 유지합니다.

위 내용은 텍스트 상자를 숨기고 버튼만 표시하도록 `` 컨트롤을 사용자 정의하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!