I want to put the label inside the textbox in html. I do not know how to put label inside the textbox. I want to make textbox like that.

My View:

<div id="filter" style="display:none; background-color:#D3D3D3;border:1px; border-style:solid; border-color:black; border-radius:5px">
                        <select asp-for="Input.areaunit"  style="height :50px; border-style:solid ;border-color: black;border-radius:5px; margin-left:100px;">
                            <option value="" hidden>Select area Unit</option>
                            <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 for="area">Area</label>
                        <input type="number" placeholder="area"name="area" asp-for="Input.area" autocomplete='false' style="height :50px ;border-color: black; border-style:solid ; margin-top:5px;margin-bottom:3px; border-radius:5px;" />
                        
                            <input type="number" placeholder="price" name="price" asp-for="Input.price"  style="height :50px ; border-color: black;  border-style:solid ; margin-top:5px;margin-bottom:3px; border-radius:5px;" />
                            <label for="price">Price</label>
                       </div>

CodePudding user response：

.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 >
  <label for="name">Name</label>
  <input id="name" name="name" type="text" placeholder="Type a name" />
</div>

CodePudding user response：

Use material text fields it can be how you want to go through this link

https://mui.com/material-ui/react-text-field/#main-content

CodePudding user response：

A <fieldset> and <legend> can simulate such a style. Wrap the <input> in a <label> abpos (position: absolute), at z-index: 1, and spread 100% x 100% within the <fieldset> -- that way as long as the user clicks anywhere in the <fieldset> the <input> gets 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>

CodePudding user response：

To prepare the UI as you mentioned, you need to do a few fixes in your code first-

1. Remove the style display: none from your parent div.
2. Remove all placeholders from your input elements so that your expected UI can take effect.
3. At last, use fieldset to wrap inputs in a box and created the expected UI.

Below is a working example in which I created the input as well as selected elements of the same UI you mentioned above.

#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 >
    <legend>Area</legend>
    <label for="area">
    <input type="number" name="area" asp-for="Input.area" autocomplete='false'/>
    </label>
  </fieldset>
  <fieldset >
    <legend>Price</legend>
    <label for="price">
    <input type="number" name="price" asp-for="Input.price"/>
    </label>
  </fieldset>
</div>