Возможно ли переполнение, видимое при вводе текста?

Ответ 1

Вот решение для Webkit и Firefox:

(Это не будет работать в IE - потому что не поддерживает офсетное смещение)

1) Удалите высоту

2) Используйте outline вместо border

3) Добавьте отрицательный outline-offset

4) Добавьте padding для точной настройки смещения

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' />

Ответ 2

Чтобы сделать это коротко: Нет, это невозможно! Единственное, что вы можете сделать, это создать замену javascript/html/css для ввода. Но это было бы накладными расходами.

Чтобы получить представление:

• задайте ввод скрытой видимости
• позиционируйте DIV с "стилем ввода" под вводом
• пусть проверка javascript, если пользователь делает нажатие клавиши при фокусировке ввода, копирует входное значение в div

Ответ 3

Ответ на исходный вопрос. Как уже было сказано Себастьяном Хенсом, это невозможно. Причина в том, что элементы input - это замененные элементы, а свойство переполнения только для не замененных элементов.

Цитата из MDN о переполнении:

Применяется к - не замененным элементам уровня блока и незаменяемым элементам встроенного блока

Как уже упоминалось в комментариях, идеальным решением было бы использовать элементы contenteditable, поскольку они соблюдают настройки overflow.

Ниже приведено обходное решение, которое использует несколько linear-gradient для создания штрихового пограничного эффекта. Часть ответа принимается из ответа Danield (части padding и удаление height). Кроме того, я изменил appearance и добавил градиенты.

Хотя мы не добавили высоту явно, фактическая высота области внутри границы будет по-прежнему такой же, как в исходном коде. Для сравнения я добавил поле ввода с исходным кодом слева. Я не знаю, приемлемо ли это для вас. Если вы обязательно захотите установить height, это не сработает.

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' />

Ответ 4

Больше обходного пути действительно, но почему бы не полностью позиционировать вход без границы над вершиной?

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'/>

Ответ 5

Я сомневаюсь, что это можно сделать так. для этого используется атрибут size. поэтому манипулируйте размером, используя код. например. в php;

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