I have an text box input in my HTML. I know how to set the background color of the whole thing with CSS (background-color) but is it possible to only set the background-color of the first word? I want it so that if someone types in, for example, "hello there", the background color of the word 'hello' will turn orange, but if they type in "how are you", the word 'how' will turn blue.

I have gotten it to style the whole textbox in this JSFiddle here with jQuery and CSS, but is it possible to make it only set the background color of the first word?

I have an text box input in my HTML. I know how to set the background color of the whole thing with CSS (background-color) but is it possible to only set the background-color of the first word? I want it so that if someone types in, for example, "hello there", the background color of the word 'hello' will turn orange, but if they type in "how are you", the word 'how' will turn blue.

I have gotten it to style the whole textbox in this JSFiddle here with jQuery and CSS, but is it possible to make it only set the background color of the first word?

• javascript
• jquery
• html
• css

• but only blue and orange right? – m0bi5 Commented Mar 1, 2015 at 18:15
• @MohitBhasi Yes. I use the CSS classes to change the background. I want the first word to be blue or orange and the rest to be white. – Alex Studer Commented Mar 1, 2015 at 18:16
• so only two cases when user inputs hello and how? – m0bi5 Commented Mar 1, 2015 at 18:17
• Not sure this is possible. You could however emulate the effect with a few css hacks. – MP_Webby Commented Mar 1, 2015 at 18:17
• 3 There are the ::first-letter and ::first-line pseudo-elements, but not the ::first-word one. Maybe a future spec will introduce it. – Oriol Commented Mar 1, 2015 at 18:21

3 Answers 3

Quick solution (not perfect) writen in few minutes, but maybe it help You to create better solution.

http://jsfiddle/ea7qbdLx/8/

HTML:

<div class="magic-input-container">
    <div class="form-control first-word"></div>
    <input type="text" id="textbox" class="form-control" placeholder="Type here..."/>
</div>

JS:

$(document).on('keydown keyup change', '.magic-input-container input', function (){

    if(($(this).val().length) && ($(this).val().split(' ').length)){

        $(this).closest('.magic-input-container').find('.first-word').html($(this).val().split(' ')[0]).show();
    }
    else{

        $(this).closest('.magic-input-container').find('.first-word').hide();
    }    
});


$(document).on('click', '.magic-input-container .first-word', function (){

    $(this).closest('.magic-input-container').find('input').focus();
});

CSS:

body {
    padding: 10px;
}

.magic-input-container {
    width: 100%;
    height: auto;
    position: relative;
    float: left;
}

.magic-input-container .first-word {
    background: red;
    width: auto;
    height: 20px;
    line-height: 20px;
    box-shadow: none;
    margin: 6px 12px;
    padding: 0px 1px;
    border: 0px;
    top: 0px;
    position: absolute;
    border-radius: 0px;
    display: none;
    color: #FFF;
}

I believe there is no formatting style for such a textbox, textarea. But you can fake it. I have two idea:

1. Set background color of text input to transparent, then you create an colored background using span, div etc. Set position or margin so that text box is over the background.
2. Write or using an formated text editor that render text using html

$(document).ready(function() {
    $('input').keyup(function(){
        var str= $(this).val();
        var idx = str.indexOf(' ') != -1?str.indexOf(' '):str.length;
        $('span').text(str.substr(0, idx));
        $(this).css('margin-left',-$('span').width()-6);
    });    
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span style="background-color:green; color:transparent">hello</span>
<input value="hello there" style="margin-left:-36px; background: transparent"/>

This is my version with minimal jQuery :)

HTML:

<div class="container">
    <span id="bg"></span>
    <input id="inp" type="text" name="txt" size="60" />
</div>

CSS:

.container {
    position: relative;
}

.container span {
    background: green;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0.4
}
.container input {
    position: absolute;
    z-index: 1;
}

jQuery:

var bgElem = $("#bg");
var inpElem = $("#inp");
bgElem.height(inpElem.outerHeight());

inpElem.on("keyup", function() {

    var val = $.trim( $(this).val() );
    var fword = val.split(" ")[0];
    var width = $("<span/>", { text: fword, css: { display: 'none' }}).appendTo("body").width() - 4;
    bgElem.width(width);
});

Demo@Fiddle