CSS如何使文本字段内的文本无法选择（直到第一个字符输入）并具有5px的左边距

Question

I want to replicate the sign up form the way google has it: https://accounts.google.com/SignUp?continue=http%3A%2F%2Fwww.google.ca%2F&hl=en But I do not know how to turn the text inside the field unselectable. Here is the rub: I have to make textfield editable so I can't use readonly. See the link please if you need clarification. Also, I don't know how to give the text inside the field margins

Here is what I have so far: HTML:

<input type="text" onkeyup="validateName(this)" id="first" name="firstName" class="nameSignup" value="First">

CSS: #first { color: grey; }

Javascript:

function validateName(id){
var str = id.value;

if(str == ""){
    id.value = "First";
    $(id).prop('selectionStart', 0)
                 .prop('selectionEnd', 0);
            //psudo code
             turn text grey
             turn text unselectable
             margin-left: 10px;
}else{
        //Pseudo code
        erase the default value
        turn text black
        turn text editable
        margin-left: 0px;
        check if the character is valid (not @, #, $, etc)
}
}

Answer 1

You can use HTML5 placeholder attribute. This is not supported in older browsers though.

<input type="text" onkeyup="validateName(this)" id="first" name="firstName" class="nameSignup"  placeholder="First">

Support For crossBrowser compatibilty probably you can check this