HTML-Eingabe Stil die Box zu verstecken, aber den Inhalt anzeigen

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

  •  02-07-2019
  •  | 
  •  

Frage

Ich habe ein Formular in HTML, wo unsere Benutzer in den Daten zu füllen und anschließend ausdrucken. Die Daten werden nicht überall gespeichert. Diese Formen kommen von außerhalb des Unternehmens und gebaut werden als HTML-Seiten das Original so nah wie möglich zu ähneln und dann gestopft entfernt und in einem Ordner auf dem Intranet vergessen. Normalerweise tut ein anderer Entwickler sie, aber ich habe ein paar zu tun, während er draußen ist. Beim Blick durch seinen Code, alle seine Formen haben eine Reihe von serverseitigen Code, um die Eingaben zu übernehmen und neu zu schreiben, um die Seite mit nur dem Inhalt. Es scheint, wie es sollte ein besserer Weg geben.

Ich möchte nur die Texteingaben Stil einen Medienwähler so, dass, wenn er druckt Sie den Text sehen kann, aber nichts von der Box um ihn umgibt. Irgendwelche Gedanken?

War es hilfreich?

Lösung

Fügen Sie eine separate CSS-Datei für den Druck von so etwas wie dies zu tun: 

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

fügen Sie es den <head> Abschnitt der Seite.

In dieser (print.css) Datei enthält Styling relevant, was Sie sehen wollen, wenn die Seite gedruckt wird, zum Beispiel:

input{border: 0px} sollte die Grenze von Eingabefeldern ausgeblendet, wenn gedruckt wird.

Andere Tipps

Angenommen, Sie nur die Grenze und solche aus Texten entfernen möchten, müssen Sie sie eine Klasse geben. Vielleicht so etwas wie: 

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

und CSS, beladen mit media = "print": 

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

würde wie folgt enthalten: 

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

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

Wo #fff ist Ihre Hintergrundfarbe ..

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top