Input border cutout for label cross section

Question

I would like to put inputs label on border cross section and would like to hide borders under label like this 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

Does this answer your question? [Placing text inside the border of a text input](https://stackoverflow.com/questions/45150781/placing-label-text-inside-the-border-of-a-text-input) — Nebojsa Nebojsa, Jan 20 '22 at 12:43
@Trekstler I recommend positioning the label with position. This gives you more flexibility. https://stackoverflow.com/a/70786590/14807111 — Maik Lowrey, Jan 20 '22 at 12:59

score 4 · Accepted Answer · answered Jan 20 '22 at 12:42

4

Use fieldset

textarea {
  width: 100%;
  border: none;
}

<form>
  <fieldset>
    <legend>Your heading</legend>
    <textarea></textarea>
  </fieldset>
</form>

answered Jan 20 '22 at 12:42

Nitheesh

19,238
3
22
49

score 1 · Answer 2 · answered Jan 20 '22 at 12:51

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>

Input border cutout for label cross section

2 Answers2