Text box With Color live priview

Write color in text box and preview in right side.live color change in text box.

HTML

<ul>
        <li>
            <div class="input-color">
                <input type="text" value="Orange" />
                <div class="color-box" style="background-color: #FF850A;">
                </div>
            </div>
        </li>
        <li>
            <div class="input-color">
                <input type="text" value="Navy blue" />
                <div class="color-box" style="background-color: navy;">
                </div>
            </div>
        </li>
        <li>
            <div class="input-color">
                <input type="text" value="green" />
                <div class="color-box" style="background-color: green;">
                </div>
            </div>
        </li>
        <li>
            <div class="input-color">
                <input type="text" value="#FF002A" />
                <div class="color-box" style="background-color: #FF002A;">
                </div>
            </div>
        </li>
    </ul>

Jquery

​$('ul input').on('keyup',function () {
    $(this).parent().find('div').css('background-color', $(this).val());
});​​

CSS

ul { margin: 20px; }

.input-color {
    position: relative;
}
.input-color input {
    padding-left: 20px;
}
.input-color .color-box {
    width: 10px;
    height: 10px;
    display: inline-block;
    background-color: #ccc;
    position: absolute;
    left: 5px;
    top: 5px;
}​

DEMO / DOWNLOAD