Возможно ли задать значение входного текста?

Я хотел бы знать, возможно ли стиль создания поля ввода... такой, как:

<input class="textBox" type="text" rel="Inserisci il <span style=" value="Inserisci il <span style='color:#c83243;'>titolo</span> per l’URL personalizzato" name="ctl00$InsertDati1$txtTitolo">

но он не отображает элемент span. Любые предложения?

Ответ 1

Вы можете стилизовать содержимое в поле ввода. Например,

input{
    color:#ff0000;
    font: 1em/1.25em Arial, Helvetica, sans-serif;
}

Если вы хотите использовать контент-заполнитель, с другой стороны, вы можете добавить атрибут "placeholder" во входном теге, например:

<input type="text" class="textbox" placeholder='Title' />

Обратите внимание, что заполнители работают только в браузерах, поддерживающих HTML5 и атрибут placeholder. Если вы хотите совместимость для старых браузеров и не возражаете использовать JQuery, вы можете использовать плагин JQuery, например водяной знак JQuery.

Однако вы не можете поместить элементы span в тег value тега input.

Ответ 2

Использование contentEditable атрибута с div очень приятно, я думаю. Пример: https://jsfiddle.net/scjnwrnf/ <div contenteditable="true">This is a paragraph.<span style = "color:red"> It is editable. </span> Try to change this text.</div> Затем вы можете скрыть элемент ввода и поместить текстовое значение из div в значение ввода через JavaScript. Спасибо penartur.

Ответ 3

Нет, это невозможно.

Не пытайтесь злоупотреблять атрибутом value, чтобы предоставить элемент <label> для элементов формы. (И не пытайтесь использовать атрибут rel для чего-то другого, кроме отношений на ссылках, если на то пошло).

Вместо этого используйте реальный <label>. Если вы действительно хотите, чтобы он появился там, где пользователь собирается печатать, выполните следующие действия:

Оберните ввод и метку в контейнере (например, div)
Установите position: relative на нем, чтобы сделать его содержащим блоком
Абсолютно позиционируйте ввод поверх метки
Сделать цвет фона прозрачным.
При необходимости добавьте любой другой стиль

Ответ 4

Вы можете стилизовать все содержимое окна ввода, но не можете применять разные стили к различным частям своего содержимого.

например. <input style="color:red" value="all text is red"/> возможен, но <input value="<span style='color:red'>this text is red</span>, and <span style='color:red'>this text is red</span>"> нет.

Попробуйте взглянуть на многострочные поля с контентной функцией.

Ответ 5

Одна вещь, которую вы можете сделать, - это стиль текста с помощью селектора ввода, а затем стиль его ввода: фокус. Таким образом, текст заполнителя будет выглядеть иначе, чем текст, который кто-то набирает.

Ответ 6

Да, это возможно.. попробуйте с помощью селектора, как это:

input[value^="Your Value"] {
    Your styles
}

Ответ 7

Попробуйте использовать загрузочный пакет Twitter - http://twitter.github.com/bootstrap - вы можете легко достичь углового радиуса, вставки теней, приятного наведения и фокусных эффектов... Вы также можете скачать версию "less-css" - действительно гибкий инструмент, но для более опытных пользователей:)