设计一个带有文本的文本框

Question

如何设计这个文本框

文本框边框中的登录标签类型，如何使用 bootstrap 和 css 完成此操作，请帮助我！！

Answer 1

试试这个答案。这可能会有所帮助。

.sample-form {
  margin: 15px 0;
}

.sample-form .form-group {
  position: relative;
}

.sample-form .form-group label {
  position: absolute;
  top: -15px;
  left: 15px;
  background-color: #ffffff;
  margin: 0;
  padding: 2px 5px;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<div class="container">
 <form class="sample-form">
   <div class="form-group">
    <label for="usr">Name:</label>
    <input type="text" class="form-control" id="usr">
  </div>
 </form>
</div>

设计一个带有文本的文本框

Design a textbox with text

html

css

responsive-design

bootstrap-4