CSS border with text gap without changing the background

Question

How do you make a border with some gap so that arbitrary text can get in (without hard coding the background color/image). Also without altering the HTML

My attempt so far

https://codepen.io/anon/pen/ZZVMBx#anon-login

    $primary-color: blue;
    $border-color: blue;
    $base-font-size: 16px;

    label {
      position: relative;
      span {
        position: absolute;
        display: block;
        color: $border-color;
        left: 10px;
        right: 0;
        top: -8px;
        font-size: 14px;
      }
      input {
        position: absolute;
        border: 2px solid $border-color;
        border-radius: 4px;
        padding: 8px;
        z-index: -1;
        font-size: $base-font-size;
      }
    }

      <label>
        <span>label</span>
        <input type="text" value="hello">
      </label>

Similar to Text in Border CSS HTML except that I have noted that I do not want the background to be changed. The accepted answer and answers provided set the background white.

easier approach would be adding a white background to the label — Facundo Corradini, Apr 26 '19 at 04:08
your code works fine for me with out any overlapping as in the image. Still if you want some more gap between label and input, you may add top offset value(eg: top: 30px) to input — Pons Purushothaman, Apr 26 '19 at 04:09

Udhay Titus · Answer 1 · 2019-04-26T10:04:08.940

2

just add padding and background for your span it will works

    background:white;
    padding-left: 10px;
    padding-right: 40px;

label {
  position: relative;
}
 label span {
  position: absolute;
  display: block;
  color: blue;
  left: 10px;
  right: 0;
  top: 8px;
  font-size: 14px;
  background: white;
  padding-left: 10px;
  padding-right: 40px;
}
 label input {
  position: absolute;
  border: 2px solid blue;
  border-radius: 4px;
  top: 15px;
  padding: 8px;
  z-index: -1;
  font-size: 16px;
}

<label>
        <span>label</span>
        <input type="text" value="hello">
      </label>

check your updated codepen here

edited Apr 26 '19 at 10:04

answered Apr 26 '19 at 04:40

Udhay Titus

5,761
4
23
41

I explicitly stated in the OP that I don't want to change the background color. – Archimedes Trajano Apr 26 '19 at 06:21
1

@TemaniAfif thank you. I understand OP code that's why I kept code pen link in answer, also I will convert it and will update the answer. But OP's requirement `span` without background still I'm trying – Udhay Titus Apr 26 '19 at 10:01

karthikaruna · Answer 2 · 2019-04-26T05:52:57.333

2

<form>
 <fieldset>
  <legend>Label</legend>
  <input type="text">
 </fieldset>
</form>

You may be interested in fieldset. Have a look.

Customize the CSS per your need.

edited Apr 26 '19 at 05:52

answered Apr 26 '19 at 05:38

karthikaruna

3,042
7
26
37

Link only answers are discouraged. You should put any relevant code in the answer itself. You can use StackSnippets (the `<>` button in the editor) to produce an interactive example in your answer. – Jon P Apr 26 '19 at 05:49
Thanks for the suggestion, downvote makes people think that the answer itself isn't good enough. – karthikaruna Apr 26 '19 at 05:56
This is the closest thing except that it changed the HTML. However, I upvoted because it led to the direction of checing how the use agent does it. – Archimedes Trajano Apr 26 '19 at 06:25
I am thinking there's something in `fieldset` but I can't seem to recreate what the browser does even when I look at the CSS in the debugger. – Archimedes Trajano Apr 26 '19 at 23:03

CSS border with text gap without changing the background

2 Answers2