HTML 입력 스타일은 상자를 숨기지 만 내용을 표시합니다.

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

  •  02-07-2019
  •  | 
  •  

문제

HTML에는 사용자가 데이터를 채우고 인쇄하는 양식이 있습니다. 데이터는 어디에서나 저장되지 않습니다. 이 양식은 회사 외부에서 나오며 원본을 가능한 한 가깝게 닮은 후 인트라넷의 폴더에 잊어 버리고 잊혀진 HTML 페이지로 제작되었습니다. 일반적으로 다른 개발자는이를 수행하지만 외출하는 동안 몇 가지해야합니다. 그의 코드를 살펴보면 그의 모든 양식에는 입력을 취하고 내용만으로 페이지를 다시 작성하는 서버 측 코드가 많이 있습니다. 더 나은 방법이 있어야하는 것 같습니다.

미디어 선택기를 사용하여 텍스트 입력을 스타일링하여 인쇄 할 때 텍스트를 볼 수 있지만 주변 상자는 없습니다. 이견있는 사람?

도움이 되었습니까?

해결책

다음과 같은 작업을 수행하여 인쇄 할 별도의 CSS 파일을 추가하십시오.

<link rel="stylsheet" type="text/css" media="print" href="print.css">

그것을 추가하십시오 <head> 페이지 섹션.

이 (print.css) 파일에는 페이지가 인쇄 될 때보고 싶은 것과 관련된 스타일이 포함됩니다.

input{border: 0px} 인쇄 할 때 입력 상자의 경계를 숨겨야합니다.

다른 팁

텍스트에서 국경을 제거하고 싶다고 가정하면 클래스를 제공해야합니다. 아마도 :

<input type="text" class="print-clean" .../>

그리고 CSS, Media = "Print"가 장착되어 있습니다.

<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

다음과 같은 것을 포함합니다.

.print-clean {
    border: none;
    background: transparent;
}

<input type="text" style="border: 0; background-color: #fff;" />

여기서 #fff는 당신의 배경색입니다 ..

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