Textfield Rand entfernen für Druckversion

Blacksonny · 2. Juli 2016

Wie kann ich für eine Druckversion einer Webseite, den Rand des Textfields entfernen lassen. Hab nichts gescheites im Netz gefunden, deshalb hier die Frage.

Fancy · 3. Juli 2016

CSS

@media print {
    .dieklasse {
        border: none;
    }
}

edit:
das kann dir helfen: https://wiki.selfhtml.org/wiki…dung_und_Praxis/Print-CSS

Blacksonny · 3. Juli 2016

Funktioniert leider nicht

Fancy · 3. Juli 2016

zeig mal dein Code des Textfields, eventuell ein Link falls dus zeigen magst
edit: mit !important auch versucht? kann dir gerne per tv weiter helfen

Blacksonny · 3. Juli 2016

Ist alles über Localhost ist für einen Freund von mir soll so eine Formular Seite sein, dass ihm einiges erspart.
Bin nur am Grundgerüst dran damit, er mir dann genau sagen wie er es haben will. Kam bis jetzt mit allem klar nur halt bekomme ich das nicht hin:

Das ist die Index.html:

HTML

<html>
    <head>
        <title>Test</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link href="druckversion.css" rel="stylesheet" type="text/css" media="print" />
    </head>
    <body style="background-color: #a5a5a5;">
        <div class="logo">
            <img src="images/ak.png" alt="logo" style="display: block; margin: 0px auto;" />
        </div>
        <div class="titel">
            <h1>Thema</h1>
            <h1>VKL Mandat</h1>
            <h1>Ansprechpartner</h1>
            <h1>Fachbereiche</h1>
            <h1>Prioriät</h1>
            <h1>Projektstart</h1>
            <h1>Projektende</h1>
        </div>
        <div class="textfelder">
            <input type="text" name="thema" style="height: 30px; font-size: 25px;"><br /><br />
            <input type="text" name="vklmandat" style="margin-top: 13px; height: 30px; font-size: 25px;"><br /><br />
            <input type="text" name="ansprechpartner" style="margin-top: 15px; height: 30px; font-size: 25px;"><br /><br />
            <input type="text" name="fachbereiche" style="margin-top: 10px; height: 30px; font-size: 25px;"><br /><br />
            <input type="text" name="prioritaet" style="margin-top: 10px; height: 30px; font-size: 25px;"><br /><br />
            <input type="text" name="projektstart" style="margin-top: 13px; height: 30px; font-size: 25px;"><br /><br />
            <input type="text" name="projektende" style="margin-top: 10px; height: 30px; font-size: 25px;">
        </div>
        <div class="textarea">
            <h1>Bemerkungen</h1>
            <textarea name="Bemerkung" rows="15px;" cols="70" style=" font-size: 25px; resize: none;" ></textarea>
        </div>
    </body>
</html>

Alles anzeigen

Und das die druckversion.css

Code

@media print {
    .textfelder {
        border: none;
    }
}

Jedoch könnte ich ".textfelder" auslassen, da es für die komplette Seite gelten soll, aber dennoch funktioniert ja noch nicht.

Edit: Es geht natürlich auch über TV

Fancy · 3. Juli 2016

Code

@media print {
            input[type="text"], textarea  {
                border: none;
            }
        }

müsste dann so gemacht werden

Blacksonny · 3. Juli 2016

Oh nice, dankeschön aber wieso das denn?
Ich hatte es mal only mit "input" versucht ging trotzdem nicht, obwohl das dann doch für alles gelten sollte

EDIT: Kannst du mir vielleicht ein paar Tipps geben oder ähnliches. Beispielsweise zu diesem Code, will in diese Szene einsteigen, klein angefangen stört mich ja nicht^^ Nur will ich schon alles richtig machen zum Beispiel, Sachen vermeiden die ich nicht brauche oder im Code etwas vereinfachen.

Fancy · 3. Juli 2016

Für alle Inputes müsstest du das dann so schreiben

Code

@media print {
        input[type] {
            border: none;
        }
    }

da wird halt alles mit genommen passwort, month, date etc.

Blacksonny · 3. Juli 2016

Ja, verstehe halt nur nicht wieso man unbedingt das "type" mitnehmen muss und hab meinen Beitrag editiert oben, wäre nett wenn du dich dazu äußerst

EDIT: Ah doch es geht liegt wohl an dem @media print

Fancy · 3. Juli 2016

Zitat von Sean.Davis

Ja, verstehe halt nur nicht wieso man unbedingt das "type" mitnehmen muss und hab meinen Beitrag editiert oben, wäre nett wenn du dich dazu äußerst

Hast dazu eine PN bekommen.

Soweit ich weiß musst du halt ein Attribut ansprechen und nur mit input würde es nicht gehen, da es nur ein Element ist.

Blacksonny · 3. Juli 2016

Durch das @media print geht es auch nur mit input, hab es eben getestet

Fancy · 3. Juli 2016

Zitat von Sean.Davis

Durch das @media print geht es auch nur mit input, hab es eben getestet

Stimmt, man kann ja auch Elemente ansprechen per CSS my bad aber da es geht dann ist ja alles fit bei fragen stehe ich dir ja schon per PN zu Verfügung

Blacksonny · 3. Juli 2016

Echt nett danke rettest mir so einiges

Hat sich eigentlich somit hier für dieses Thema erledigt.

breadfish.de 12. März 2022