plantillas - formularios en tablas html

Ocultar los controles de formulario al imprimir una página HTML con CSS

Question

Ciertos elementos de formulario HTML tienen una IU adicional adjunta, como las flechas arriba / abajo en el number . Sin embargo, al imprimir la página, esos botones ya no son necesarios, ya que el usuario no puede interactuar con ellos en forma impresa.

Los cuadros de texto son fáciles de tratar:

@media print {
    input {
        border: none;
        border-bottom: 2px solid #000000;
    }
}

Los hace imprimir muy bien, como una línea con texto en él. Al igual que un formulario que uno llenaría a mano. Sin embargo, hacer lo mismo con las entradas como el number te deja con esas desagradables flechas arriba / abajo:

Y luego hay impresiones menos útiles, como el range , que no significa nada cuando estás en una página:

¿Hay alguna forma de evitar esto? ¿Alguna forma de diseñar esa parte del elemento para que sea invisible, pero aún así ver el valor / texto?

Me doy cuenta de que uno podría intercambiar el atributo type="" con JS, o tener otro elemento que contenga el valor que se mostrará en la impresión, pero si hay una solución que se puede hacer solo con CSS, eso sería superior.

Answer 1

¿Tal vez debería usar un javascript simple para obtener solo los valores de los campos en cuestión, en la acción de impresión, cambiar a un formato imprimible, realizar la impresión y volver a la normalidad?

Realmente no sé si es posible usar solo CSS.

Es posible que desee considerar el uso de un mecanismo de análisis XML. Este es un método realmente conveniente para tales tareas.

http://webdesign.about.com/od/xslt/a/xslt-tutorial-1.htm

Answer 2

Este efecto se puede lograr en los navegadores webkit. Todavía no puedo encontrar una manera de hacerlo en otros, pero funcionará para webkit.

@media print {
    input::-webkit-outer-spin-button,  
        input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
}

Webkit en realidad trata esos botones como pseudo elementos (con una buena razón) y proporciona una manera de ocultarlos. Este es exactamente el tipo de comportamiento que uno desearía, aunque el hecho de limitarse solo a webkit es un poco molesto.

Answer 3

Puedes intentar ocultar elementos específicos con selectores de CSS

@media print {
    input[type=range] {
        display: none;
    }
}

Sin embargo, para ocultar las flechas en un elemento number , quizás podría intentar colocar 2 elementos en su lugar, 1 text y 1 number , y luego mostrar el number en el modo de pantalla, mientras el text está oculto, y viceversa en el modo de impresión

@media print {
    input[type=text] {
        display: inline-block;
        border:none;
        border-bottom:2px solid #000;
        etc..
    }
    input[type=number] {
        display: none;
    }
}
@media screen {
    input[type=number] {
        display: inline-block;
    }
    input[type=text] {
        display: none;
    }
}

Algo similar se puede hacer para otros elementos de forma. Dependerá de su implementación si puede utilizar este método.

Answer 4

Una alternativa sería proporcionar un enlace para imprimir, y tener otra copia de la página sin todas las cosas adicionales.

ie:        www.something.com/page.htm
printpage  www.something.com/page-print.htm

esta es la práctica más común (también, puede reutilizar css con solo imprimir partes en ella)

Espero que ayude

Answer 5

Una mejor solución, ya que no usa el prefijo del proveedor, será usar el elemento de output .

Principios

1. ocultar output elemento de output en la @media screen ;
2. actualizar el valor del elemento de output en la entrada de campo;
3. alternar la visibilidad de la input y el elemento de output en @media print .

→ Codepen disponible aquí .

HTML

<form onsubmit="return false" oninput="print.value = parseInt(screen.value)">
  <input class=''screen'' name="screen" type="number" value=''0''> →
  <output class=''print'' name="print">5 (default print value)</output>
</form>
<p>The <code>output</code> element replace the <code>input</code> on print media</p>

CSS

.print {
  display: none;
}

@media print {
  .screen {
    display: none;
  }
  .print {
    display: inline-block;
  }
}

Answer 6

intente utilizar una prueba oculta en la pantalla y luego muéstrela en la impresión

@media print {
    .hideOnprint {
        display: none;
    }
    .hideOnScreen {
        display: block;
    }
}
@media screen {
    .hideOnprint {
        display: block;
    }
    .hideOnScreen {
        display: none;
    }
}

afecta el texto con la clase hideOnScreen y la entrada con la clase hideOnPrint