Question

目前，此输入字段是通过为标签指定白色背景创建的，但当输入字段位于不同颜色的背景上时，它会发生冲突。有没有办法让边框长度不再需要背景颜色。

https://codepen.io/ehaliseda/pen/OvJOVG?editors=1100

<div id="bg-red">
  <div class="input-wrapper">
     <label for="basic-url"><span>Email</span></label>
     <div class="md-form input-group form-sm ">
          <input placeholder="YourEmail@gmail.com" type="text" class="form-control bg-input" aria-describedby="basic-addon2">
     </div>
   </div>
</div>




.md-form.form-sm input {
    font-size: 1rem;
    }


    .md-form, .md-form .btn {
    margin-bottom: 0.8rem;
    margin-top: -17px;
    }

    .bg-input{
        background-color: white !important;
        border: 1px solid #bdbdbd !important;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-color: #4285f4;

    }

    input[type=text]:focus:not([readonly]){
        box-shadow: 0px 2px 0px 0px #4285f4;
    }

    label{
        margin-left: 12px;
        padding-left: 5px;
        padding-right: 5px;
        border-top-right-radius: 2px;
        border-top-left-radius: 2px;
        z-index: 5;
        position: relative;
        background-color: white;
    }

    .md-form input::-webkit-input-placeholder{
    opacity: 0;
    }

    .md-form input:focus::-webkit-input-placeholder{
        opacity: 1;
        color: #bdbdbd;
    }

    .input-wrapper{
        height: auto;
        margin-bottom: 1.5rem;
    }           

    input[type=text]{
        color: #626262;
    }

    input[type=text]:focus{
        color: #626262;
    }

#bg-red{
  background-color:red;
  padding:20px;
}

Answer 1

使用fieldset和legend可以完成一些hacky解决方法。

以下是它的外观示例：

https://jsfiddle.net/dalecarslaw/a5he0e5d/

<fieldset>
 <legend>Test</legend>
  <input type="text" placeholder="test">
</fieldset>

Answer 2

AFAIK，无法在一个部分停止输入边框。

如果您希望输入对于“当前与期望”图像中显示的彩色背景是透明的，则可以让标签继承父级的背景颜色，以便仅需要设置父元素的背景颜色......

演示：https://www.codeply.com/go/P0OzvzqWiC

#bg-red{
  background-color:red;
  padding:20px;
}

.input-wrapper{
    height: auto;
    margin-bottom: 1.5rem;
    background-color: inherit;
}  

label{
    margin-left: 12px;
    padding-left: 5px;
    padding-right: 5px;
    border-top-right-radius: 2px;
    border-top-left-radius: 2px;
    z-index: 5;
    position: relative;
    background-color: inherit;
}

限制边框宽度以为标签创建空间，而不使用标签的背景颜色

2 个答案: