html - chosen - Desbordamiento visible en la entrada de texto, ¿es posible?

input type file no file selected text change

Question

overflow:visible CSS overflow:visible no parece aplicarse a las entradas.

Vea el siguiente violín de JS: https://jsfiddle.net/b4sr578j/

input {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
}

<input type=''text'' value=''gggyyyXXX''/>

¿Es posible hacer visibles la parte inferior de los gs y ys (sin aumentar la altura de la entrada de texto)?

Gracias por cualquier ayuda.

Answer 1

Aquí hay una solución para Webkit y Firefox:

(Esto no funcionará en IE, porque no es compatible con la compensación de contorno )

1) Eliminar la altura.

2) Usar outline lugar de border

3) Añadir un outline-offset negativo del outline-offset

4) Añadir padding para afinar el desplazamiento

FIDDLE

input {
  overflow: visible;
  font-size: 30px;
  outline: 1px dashed black;
  border: 0;
  outline-offset: -8px;
  padding: 6px 0 2px 8px;
}

<input type=''text'' value=''gggyyyXXX'' />

Answer 2

Dudo que se pueda hacer así. La entrada usa el atributo de size para esto. así que manipula el tamaño, usando código. por ej. en php

<input type="text" name="nm" size = "<?php if(strlen($text)<=10)echo 10;
 else echo strlen($text); ?>" >

Answer 3

Más de una solución realmente, pero ¿por qué no posicionar absolutamente una entrada sin borde en la parte superior?

body {
  position:relative;
}
input {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
}
input.noborder {
  border:1px transparent solid;
  height:34px;
  position:absolute;
  left:0;
  background:transparent;
}

<input type=''text'' value=''''/>
<input class="noborder" type=''text'' value=''gggyyyXXX''/>

Answer 4

Para abreviar: ¡No, esto no es posible! Lo único que podría hacer es crear un reemplazo de javascript / html / css para una entrada. Pero esto sería una sobrecarga.

Para hacerse una idea:

• establecer la entrada a visibilidad oculta
• coloque un DIV con el "estilo de entrada" debajo de la entrada
• deje que un javascript compruebe si el usuario presiona una tecla mientras enfoca la entrada y copia el valor de entrada al div

Answer 5

Respuesta a la pregunta original: como ya indicó Sebastian Hens, esto no es posible . La razón es porque input elementos de input son elementos reemplazados y la propiedad de desbordamiento se aplica solo a los elementos no reemplazados .

Cita de MDN sobre la propiedad de desbordamiento :

Se aplica a : elementos de bloque no reemplazados y elementos de bloque en línea no reemplazados

Como ya se mencionó en los comentarios, la solución ideal sería utilizar elementos contenteditable porque respetan la configuración de overflow .

Aquí hay una solución alternativa que utiliza un linear-gradient múltiple para generar el efecto de borde discontinuo. Parte de la respuesta se adopta de la respuesta de Danield (las partes sobre el padding y la eliminación de la height ). Además, modifiqué la appearance y agregué los gradientes.

Aunque no hemos agregado la altura explícitamente, la altura real del área dentro del borde todavía sería la misma que en su código original. He añadido un cuadro de entrada con su código original en el lado izquierdo para la comparación. No sé si eso es aceptable para ti. Si obligatoriamente desea que se establezca la height , esto no funcionará.

input.test {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to right, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%), linear-gradient(to bottom, gray 50%, transparent 50%);
  background-size: 8px 1px, 8px 1px, 1px 8px, 1px 8px;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-position: 0px 0px, 0px 1em, 0px 0px, 100% 0px;
  box-shadow: inset 0px -10px 0px white;
  width: 200px;
}
input.original {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
  width: 200px;
}

input{
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type=''text'' value=''gggyyyXXX'' class=''original'' />
<input type=''text'' value=''gggyyyXXX'' class=''test'' />

En el fragmento anterior, se utiliza box-shadow blanca para ocultar la parte inferior del degradado para que no se desborde (puede ver el efecto al eliminar la box-shadow ) y, por lo tanto, necesita un fondo de color sólido. Por otro lado, si la altura de su cuadro de texto es fija, entonces podría usar algo como el siguiente fragmento de código para admitir incluso fondos no sólidos.

input.original {
  border: 1px dashed black;
  overflow: visible;
  height: 28px;
  font-size: 30px;
  width: 200px;
}
input.test-fixedheight {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to right, crimson 50%, transparent 50%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%), linear-gradient(to bottom, crimson 12.5%, transparent 12.5%, transparent 25%, crimson 25%, crimson 37.5%, transparent 37.5%, transparent 50%, crimson 50%, crimson 62.5%, transparent 62.5%, transparent 75%, crimson 75%, crimson 87.5%, transparent 87.5%),linear-gradient(to bottom, transparent 0%, white 0%);
  background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em, 100% 1em;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
  width: 200px;
}
input.test-fixedheight-transparent {
  appearance: none;
  box-sizing: border-box;
  font-size: 30px;
  padding: 2px 0px 6px;
  border: 0;
  background: linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to right, beige 50%, transparent 50%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, crimson 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%), linear-gradient(to bottom, beige 12.5%, transparent 12.5%, transparent 25%, beige 25%, beige 37.5%, transparent 37.5%, transparent 50%, beige 50%, beige 62.5%, transparent 62.5%, transparent 75%, beige 75%, beige 87.5%, transparent 87.5%);
  background-size: 8px 1px, 8px 1px, 1px 1em, 1px 1em;
  background-repeat: repeat-x, repeat-x, no-repeat, no-repeat;
  background-position: 0px 0px, 0px 29px, 0px 2px, 100% 2px;
  width: 200px;
}


/* Just for demo */

body{
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}

input{
  vertical-align: top;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type=''text'' value=''gggyyyXXX'' class=''original'' />
<input type=''text'' value=''gggyyyXXX'' class=''test-fixedheight'' />
<input type=''text'' value=''gggyyyXXX'' class=''test-fixedheight-transparent'' />

Este enfoque se ha probado en Chrome, Firefox, Opera e IE11. Debido a que los gradientes son compatibles con IE10, también debería funcionar bien pero no funcionaría con ninguna de las versiones inferiores, ya que no admiten gradientes.