.Elem {
  position: relative;
}

.Elem label {
  position: absolute;
  font-size: 10px;
  color: blue;
  left: 4px;
  top: 2px;
}

.Elem input {
  padding-left: 2px;
  padding-top: 15px;
  border-radius: 0;
}

.Elem input:focus {
  border-radius: 0;
  border-color: blue;
}

<div class="Elem">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" placeholder="Type a name" />
</div>

使用材料文本字段，它可以是你想要通过这个链接
https://mui.com/material-ui/react-text-field/#main-content

<fieldset>和<legend>可以模拟这样一种风格，将<input> Package 在<label>abpos（position: absolute）中，在z-index: 1处，并在<fieldset>中展开100%x100%-A这样，只要用户在<fieldset>中的任何地方单击，<input>就会得到focus。

:root {
  font: 500 2ch/1 "Segoe UI"
}

fieldset {
  position: relative;
  width: 13rem;
  min-height: 6.25ex;
  border-color: #0202FF;
}

legend {
  position: absolute;
  top: 0.5ex;
  color: #0202FF;
}

label {
  display: block;
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

input {
  position: absolute;
  top: 3ex;
  border: 0;
  color: #8888FF;
  font: inherit;
  line-height: normal;
}

input:focus {
  outline: 0;
}

<fieldset>
  <legend>Name</legend>
  <label>
    <input type="text" autofocus>
  </label>
</fieldset>

要像您提到的那样准备UI，首先需要在代码中进行一些修复-
1.从父div中删除样式display: none。
1.从输入元素中删除所有占位符，以便预期的UI可以生效。
1.最后，使用fieldset将输入内容 Package 到一个框中，并创建了预期的UI。
下面是一个工作示例，在这个示例中，我创建了上面提到的同一个UI的输入和选定元素。

#filter {
background-color:#D3D3D3;
border:1px; 
border-style:solid; 
border-color:black; 
border-radius:5px
}

fieldset {
  position: relative;
  border-width: 3px;
  border-color: #0202FF;
}

legend {
  position: absolute;
  top: 10px;
  color: #0202FF;
  font-weight: bold;
}

input, select {
  margin-top: 10px;
  width: 100%;
  height:50px; 
  border: none;
  background: transparent;
}

input:focus, select:focus {
  outline: 0;
}

option {
  width: 100%;
  padding: 10px;
}
.marginT {
 margin-top: 20px;
}

<div id="filter">
  <fieldset>
    <legend>Select area Unit</legend>
    <label for="areaunit">
      <select asp-for="Input.areaunit">
        <option value="Kanal">Kanal</option>
        <option value="Marla">Marla</option>
        <option value="Square Feet">Square Feet</option>
        <option value="Square Meter">Square Meter</option>
        <option value="Square Yards">Square Yards</option>
      </select>
    </label>
  </fieldset>
  <fieldset class="marginT">
    <legend>Area</legend>
    <label for="area">
    <input type="number" name="area" asp-for="Input.area" autocomplete='false'/>
    </label>
  </fieldset>
  <fieldset class="marginT">
    <legend>Price</legend>
    <label for="price">
    <input type="number" name="price" asp-for="Input.price"/>
    </label>
  </fieldset>
</div>