html - How to highlight text inside an input field?

Question

Developing an application where I must highlight characters inputted in an input[type=text]. Characters can be spaces and tabs too. That is a reason I do not want to give a color to a text, but a background color, so that my users know that there's something written inside an element.

I have got nothing to aid you answering, but the hand-made picture of what I want to achieve and a jsfiddle link where I will try along with people who don't mind helping me achieving my goal for free.

Answer 1

::first-line pseudo-element ^{(for Webkit browsers)}

One option is using ::first-line pseudo-element, as follows:

input[type="text"]::first-line {
    background-color: gold;
}

WORKING DEMO.

I should note that this only works on Webkit web browsers including Safari, Chrome and Opera15+.

According to CSS level 2 spec:

5.12.1 The :first-line pseudo-element

The :first-line pseudo-element can only be attached to a block container element.

However CSS level 3 spec states that:

7.1. The ::first-line pseudo-element

In CSS, the ::first-line pseudo-element can only have an effect when attached to a block-like container such as a block box, inline-block, table-caption, or table-cell.

Hence, based on CSS level 3 spec ::first-line is applicable to inline-block elements. Since Webkit based web browsers display <input> element as inline-block we can use the pseudo-element on inputs in order to select the text.

Whereas some other web browsers (including Firefox) display input as inline and this is why ::first-line has no effect on input elements on such web browsers.

I've made up a tiny test to show the computed style of display property of input element.

Multiple text-shadow values

This doesn't seem to be a real solution, but we can fake the effect by using multiple text-shadow values as follows:

input[type="text"] {
    text-shadow: 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold,
                 0 0 50px gold;
}

WORKING DEMO (Or something fancier)

Content Editable <div> & ::first-line

As an option, you can use contenteditable attribute for a <div> element, and use appearance property to apply the useragent default stylesheet of text inputs to the <div> element, as follows:

<div contenteditable="true" class="text-input form-control">
    text with background-color
</div>

Then, you can use :first-line pseudo-element to assign the background color:

.text-input {
    display: inline-block;
    width: auto;
    min-width: 200px;

    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    appearance: textfield;

    white-space: nowrap;
}

.text-input:first-line {
    background-color: gold;
}

WORKING DEMO

Disadvantages:

• You have to disable the Enter key for the <div> element and/or submit the form by pressing that via JavaScript.

jQuery version:

$('.text-input').keypress(function(e){
    if (event.keyCode == 10 || event.keyCode == 13) {
        e.preventDefault();
        // Submit the form
    }
});

UPDATED DEMO.

• You have to get the content of the content editable <div> and assign that value to a hidden <input> element on submitting the form via JavaScript. For instance, check the link below:

  • Using HTML5, how do I use contenteditable fields in a form submission?

Redesign entirely by JavaScript

Finally, you can use JavaScript to create/adjust the colored box beneath the input element.

In this approach, we wrap the <input> by a relative positioned wrapper having a zero-width colored child and then we remove the input from document normal flow by using absolute positioning and put that over the colored box.

As we start typing in the text input, the same content will be inserted to the nether colored box, So the width of the colored box matches the width of the text.

And one more thing:

The input shouldn't have any border, background or even default appearance. And it's better to wrap the colored box itself by another element, and apply the proper styles to that element to make it look like a real input element.

That's it!

Here is a sort of implementation of the above logic using jQuery highlightTextarea plugin. It may not look good for the <input> elements as it's designed for <textarea>s.