html - 里面的标签标签

Question

好的，所以我在我刚购买的一个应用程序上看到了这个，现在我想用我的表格来做。看起来标签实际上在输入内部。

http://i1309.photobucket.com/albums/s627/mievan123/This_zps1884e41d.png

我知道您可以使用占位符，但是一旦您开始在该字段中输入，它们就会消失。我希望它保持如上图所示。我打了“先生”。在我在标题字段中拍照之前。

有什么秘诀！！！！

label {
    border: 1px solid black;
    border-radius: 5px;
    margin-bottom: 5px;
    border-bottom: 1px solid #669244;
    background: #669244;
    color: #ddd;
    padding: 11px 10px;
}
input {
    border: 0;
    color: black;
    font-size: 14px;
    background: #669244;
}

textarea { 
    border: 0;
    color: black;
    font-size: 14px;
    background: #669244;
}

Answer 1

您可以input用另一个具有边框和“标签”的元素围绕该元素，并从input.

label {
    border: 1px solid black;
    border-radius: 5px;
    color: gray;
    padding: 5px;
}
input {
    border: 0;
    color: black;
}

http://jsfiddle.net/ExplosionPIlls/JjasN/1/