Folha de estilo de impressão - convertendo entradas em texto

Question

Eu tenho uma mesa que tem alguns <input type="text"> Caixas nele, e eu quero que elas apareçam como texto normal ao imprimir. Eu configurei uma folha de estilo de mídia = "print" com

input
{
border-style: none;
}

Nele, e isso remove a borda para que o conteúdo se pareça com o texto, mas a entrada ainda está pressionando a largura da coluna para sua largura real (não surpreendentemente), por isso recebo espaço vazio desnecessário e larguras de coluna. Existe uma maneira descolada de definir a largura da entrada em seu tamanho de conteúdo usando CSS ou outra maneira de consertar isso?

Alguém em outros fóruns sugeriu o uso de um botão de impressão que cria scripts do lado do cliente para alterar fisicamente a marcação da página, mas infelizmente isso não é realmente prático devido à complexidade e natureza dinâmica da página.

Tenho certeza de que isso não pode ser feito, mas pensei em perguntar.

Answer 1

Não, acho que isso não pode ser feito sem algum script. Mas o script seria realmente fácil de alcançar com uma estrutura como jQuery:

• Para cada elemento de entrada, você criaria um <span> ao lado dele e dar uma aula que está oculta no media="screen" folha de estilo, e visível em media="print".

• O próprio elemento de entrada receberia uma classe que funciona ao contrário, visível em screen e escondido em print.

• Cada elemento de entrada teria um change evento que atualiza o vizinho span.

Ainda não tenho a rotina jQuery para retirar isso da minha manga, e não é hora de montá -la agora, mas é definitivamente solucionável e ainda discreto - não é necessário executar qualquer script quando o usuário começa a imprimir.

Aposto que, se você marcar novamente a pergunta ou fazer um novo, um de nossos gurus jQuery residentes dará uma olhada nela :)

Answer 2

Se você estiver usando o bootstrap:

@media print {
  .no-print {
    display: none !important;
  }

  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
  }
}

Answer 3

Me deparei com essa busca por informações sobre como estilizar meus formulários e algumas outras coisas.

Depois de mexer com alguns CSs, descobri um método apenas CSS que funciona para mim.

Todas as minhas formas têm estilo que envolvia fundo de cores e uma borda preta.

No meu arquivo CSS de impressão, copiei meu formulário CSS e mudei todas as cores (não o próprio texto) para branco. Em outras palavras, esconde minha caixa de texto e exibe apenas o texto.

CSS original - #form textarea, #form entrada, #form Selecione {borda: 1px sólido #ddd; Cor:#313131; }

Imprimir CSS - #Form Textarea, #Form Entrada, #Form Selecione {borda: 1px Solid #FFF; Cor: #FFF; }

Funciona como um charme =>

Espero que isto ajude

Answer 4

input { border-style: none; display: inline}

Answer 5

Estou usando asp.net e tive o mesmo problema.

Eu resolvi adicionando um rótulo que corresponde à minha caixa de texto e tinha duas classes configuradas:

Na tela @media:

.hdnPrint {visibility:visible;display:block;}
.visPrint {visibility:hidden;display:none;}

Em @Media Print:

.hdnPrint {visibility:hidden;display:none;}
.visPrint {visibility:visible;display:block;}

Para a caixa de texto, atribuí a classe HDNprint e, no rótulo, atribuí a classe Visprint. Quando o usuário imprime o formulário, o rótulo é exibido e o campo do formulário está oculto.

Suponho que você possa fazer algo semelhante em um ambiente não asp.net seguindo o mesmo padrão.

Não é necessário script.

Answer 6

Para definir a largura dos campos de entrada na seção de impressão CSS, use:

width: ?cm 

Para os elementos de entrada correspondentes.

Testado no Firefox; Talvez não estivesse funcionando nas versões anteriores do navegador.

Answer 7

Para o bootstrap, isso funciona para mim. É baseado na resposta do usuário5712635s, mas adicionei as propriedades da aparência para me livrar das setas para baixo nas entradas de seleção.

@media print {    
  .form-control
  {
    border: 0;
    padding:0;
    overflow:visible;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }
}