时间戳

首页 > 解决方案 > 如何在html / css中输入字段的左上角放置标签

html - 如何在html / css中输入字段的左上角放置标签

问题描述

请参考下图以供参考。我想要一种类似的表单，标签放在左上角的输入字段顶部。

图片：

在此处输入图像描述

提前致谢！

- - 更新 - -

我试过了，我能够将标签单独放在输入字段的顶部，但无法合并它。

这是它目前的样子：

在此处输入图像描述

<div class="form-group mt10">
            <label for="inputName">Name <span class="reqField">*</span></label>
            <input required type="text" class="form-control" id="inputName" placeholder="Name">
        </div>
        <div class="form-group">
            <label for="inputCountry">Country</label>
            <input type="text" class="form-control" id="inputCountry" placeholder="Country">
        </div>

标签： htmlcss

解决方案

这样的事情会有所帮助。

body.app-body {
    background: #cecece;
}
.form-group {
    border: 2px solid;
    margin: 10px;
    border-radius: 15px;
    margin-top: 20px;
}

.form-group>label {
    position: absolute;
    top: 6px;
    left: 20px;
    padding: 5px 10px;
    border-radius: 15px;
    background: #fff;
}

.form-group>input {
    border: none;
    background: transparent;
}
<body class="app-body">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <form id="first_name">
        <div class="form-group">
            <label>First name</label>
            <input type="text" class="form-control input-lg" />
        </div>
    </form>
</body>

推荐阅读