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/

<input />标签内的标签

1 个答案: