HTML/CSS - How to display transparent text snippet at end of input field

Question

In this picture from the google calculators input you can see the right side parantheses not placed, but marked, I wonder how I can place a gray-transparent string in at the end of an input field in HTML?

Answer 1

You can achieve it by using div instead of input box.

And give the div appear like a textbox.

HTML

<div id='container'>
    <div id='start'>(((((((((((</div>
    <div id='end'>)))))))))))</div>
</div>

CSS

#container {
    -moz-appearance: textfield;
    -webkit-appearance: textfield;
    background-color: white;
    background-color: -moz-field;
    border: 1px solid darkgray;
    box-shadow: 1px 1px 1px 0 lightgray inset;
    font: -moz-field;
    font: -webkit-small-control;
    display: inline-block;
}
#start {
    display: inline-block;
    color: rgba(0, 0, 0, 1);
}
#end {
    display: inline-block;
    color: rgba(0, 0, 0, 0.4);
}

Output fiddle .

---

To make the div's editable; you can use the contenteditable boolean values. Here's how the HTML will look:

<div id='container' contenteditable>
    <div id='start'>(((((((((((</div>
    <div id='end' contenteditable="false">)))))))))))</div>
</div>

And another fiddle .

Answer 2

To do this, you have to use the contenteditable attribut and a little bit of Javascript :

<div style="text-align: right; font: 20px Arial; outline: none; border: 1px solid #BBB; padding: 5px;" contenteditable="true">
</div>
<script>
    document.getElementsByTagName('div')[0].onkeypress = function(e){
        if (e.which == 40){
            this.innerHTML = '(<span style="color: #CCC">)</span>';
        }
        return false;
    }
</script>

I hope I could help you.

Answer 3

Here is working example of what you need..

html

<div class="input">
    <p class="text"></p>
    <p class="extra"></p>
</div>

javascript

$(function(){
    $("div.input").click(function(){
        $(document).keypress(function(e){
        var char = String.fromCharCode(e.which);
            $("div.input .text").append(char);
            if(e.keyCode==40)   {
              $("div.input .extra").append("<span class='gray'>)</span>");
            }
             if(e.keyCode==41)   {
              $("div.input .extra").text("");
            }
    });
  });
});

css

.input{

width:500px;
height:30px;
border:1px solid black;

}


.gray{
 color:#CCCCCC;
}
p{
display:inline;}

jsfiddle demo