is it possible to style a value of an input text?

Question

I'd like to know if is possible to style a value of an input box... such as :

<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">​​​​​​​​​​​​​​​​​​​​​​​​​​​​

but it doesnt render the span element. Any suggestions?

Answer 1

You can style the content within an input box. For eg:

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

If you want to use placeholder content on the other hand, you can add a 'placeholder' attribute on the input tag like so:

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

Note that placeholders only work in browsers that support HTML5 and the placeholder attribute. If you want compatibility for older browsers and dont mind using some JQuery, you can use a JQuery plugin like JQuery Watermark.

You can't however, place span elements within the value of an input tag.

Answer 2

Using contentEditable attribute with div is very nice I think. Example: 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> Then you can hide input element and put plain text value from div into input value via JavaScript. Thanks penartur.