标签横截面输入边框
标签横截面输入边框
提问于 2022-01-20 04:38:31
我想把输入标签放在边界横截面上，并且像这样把边框隐藏在标签下面。
我这样做只是简单地使标签背景白色，但它显然不工作，如果我把它放在灰色div的任何其他解决方案吗？
此外，我使用类星体输入，所以我仅限于css解决方案
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-01-20 04:42:03
使用字段集
textarea {
width: 100%;
border: none;
}<form>
<fieldset>
<legend>Your heading</legend>
<textarea></textarea>
</fieldset>
</form>
Stack Overflow用户
发布于 2022-01-20 04:51:42
您可以使用位置绝对的标签和使用顶部和左边的位置您的标签。为什么要用位置？那你就有了更多的灵活性。也许你可以把标签推到右边等等。
* {
font-family: arial;
}
/** float container */
.float-container {
border: solid 1px #ccc;
box-sizing: border-box;
margin-bottom: 8px;
padding: 0 8px;
position: relative;
width: 300px;
}
input {
border: none;
font-size: 16px;
outline: 0;
padding: 16px 0 10px;
width: 100%;
}
label {
font-size: 12px;
position: absolute;
top: -6px;
left: 10px;
background: white;
}<div id="floatContainer1" class="float-container ">
<label for="floatField1 ">Label 1</label>
<input type="text" id="floatField1" data-placeholder="Placeholder 1">
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70786398
复制相关文章
相似问题
腾讯云开发者
