问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

将 <label> 文本放置在文本输入的边框内

社区维基
1
新手上路，请多包涵

我正在寻找这段代码：

 <form id="first_name">
    <div class="form-group">
         <label>First name</label>
         <input type="text" class="form-control input-lg" />
    </div>
</form>

看起来像这样

在此处输入图像描述

减去颜色、复选框、值等。本质上，我希望它看起来就像字段集中的图例标签，但没有标签和文本输入边框内的标签。提前致谢！

原文由 Dtrav 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssformsinput
阅读 403
2 个回答
得票最新
社区维基
1
✓ 已被采纳

这就是您所需要的。您可以根据需要更改 CSS 值。同样重要的是将标签的 background-color 设置为与表单/html 相同的颜色。

 .form-group{
  padding:10px;
  border:2px solid;
  margin:10px;
}
.form-group>label{
  position:absolute;
  top:-1px;
  left:20px;
  background-color:white;
}

.form-group>input{
  border:none;
}

 <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>

希望这可以帮助 ：）。

原文由 Manish 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

您可以使用图例标签。

 <!DOCTYPE html>
<html>
<body>

<form>
 <fieldset>
  <legend>Contact</legend>
  Name <input type="text"><br>
  Email <input type="text"><br>
 </fieldset>
</form>

</body>
</html>

原文由 AzizStark 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题