css - CSS边框与文本间隙而不改变背景

Question

您如何制作带有一些间隙的边框，以便可以输入任意文本（无需对背景颜色/图像进行硬编码）。也无需更改 HTML

到目前为止我的尝试

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>

类似于边框 CSS HTML 中的文本，只是我注意到我不希望更改背景。接受的答案和提供的答案将背景设置为白色。

标签： css

Answer 1

只需为您的跨度添加填充和背景即可

    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>

在此处检查您更新的代码笔