CSS를 통해 입력을 보이지 않게 만드시겠습니까?

StackOverflow https://stackoverflow.com/questions/1078451

  •  21-08-2019
  •  | 
  •  

문제

웹 사이트 브랜드에 따라 두 개의 입력 필드 중 하나가 주어진 지점에서 볼 수있는 양식이 있습니다.

나는 단지 두 입력 필드를 같은 컨테이너에 넣은 다음 스타일 시트를 통해 그 중 하나를 표시 할 것이라고 생각했습니다. 이것은 필드를 숨기지 만 여전히 공간을 차지하게합니다. 또한 높이와 너비를 0으로 설정하거나 가시성을 숨겨져 있거나 무너지는 시야를 설정하려고 시도했지만 그 중 어느 것도 효과가 없었습니다.

지금까지 모든 브랜딩 작업은 CSS 스타일 시트로 수행 할 수 있으므로 그렇게 유지하고 싶습니다. 솔루션은 최소한 IE6 & UP, Firefox 2 & UP 및 Chrome (최신)에서 지원해야합니다.

도움이 되었습니까?

해결책

보이지 않는 입력 필드를 설정하는 것은 어떻습니까? position: absolute; 렌더링 흐름에서 벗어나야합니다.

그러나 설정 display: none 이론적으로 똑같이해야합니다 ...

다른 팁

입력을 사용하지 않는 이유는 무엇입니까? type="hidden" ? 

<style>
.hideme
{
    display:none;
    visibility:hidden;
}
.showme
{
    display:inline;
    visibility:visible;
}
</style>


<input type="text" name="mytext" class="hideme">

클래스 = "hideme"을 설정하여 제어 또는 클래스 = "showme"을 숨기려면 컨트롤을 표시 할 수 있습니다. JavaScript 또는 서버 측 코딩을 사용 하여이 토글링을 설정할 수 있습니다.

이것은 필드를 숨기지 만 여전히 공간을 차지하게합니다.

이것은 일어나지 않아야합니다. 디스플레이 : 아무도 유량에 요소가 포함되지 않아야합니다. 나머지 CSS를 확인하십시오 (Firebug를 사용하여 일부 주변 요소의 패딩 또는 여백이 어디에서 나오는지 여분의 "공간"이 어디에서 나오는지 알아 봅니다).

나는 CSS에 너무 익숙하지 않지만 구현을 시도 할 수 있습니다. jQuery JavaScript와 CSS를 결합하여 상대적으로 쉽게 수행 할 수 있습니다.

가시성 속성을 사용하면 요소가 보이지 않더라도 렌더링 공간이 차단됩니다. 가시성을 사용하는 대신 디스플레이 속성을 사용해야합니다.

당신은 설정할 수 있습니다 표시하다 에게 없음 요소를 숨기고 표시하려면 차단하다 또는 인라인 당신이 그들을 보여주고 싶다면.

디스플레이 체크를 살펴 보려면 이것

디스플레이 속성을 설정하면 문제가 해결되지 않으면 텍스트 상자가 절대적으로 배치 될 수 있다고 생각합니다. 레이아웃이 변경되지 않은 이유 일 수 있습니다.

전체 코드를 게시 해 주시겠습니까?

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top