'Input border cutout for label cross section [duplicate]

I would like to put inputs label on border cross section and would like to hide borders under label like this enter image description here I did this by simply making label background white but it obviously doesn't work if I place it inside grey div any other solution for this?

Also I'm using quasar inputs so I'm limited to css only solutions

csshtml-input


Solution 1:[1]

Use fieldset

textarea {
  width: 100%;
  border: none;
}
<form>
  <fieldset>
    <legend>Your heading</legend>
    <textarea></textarea>
  </fieldset>
</form>

Solution 2:[2]

You can use position absolute for the label and the use top and left for position your label. Why using position? Then you have more flexibilty. Maybe you can push the label to the right and so on.

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nitheesh
Solution 2 Maik Lowrey

Related Questions