无法在css中获得正确的位置。

Question

我已经干了一整天了。我正在创建一个动画来包装我的整个输入文本，一旦它得到一个焦点。一开始就是这样看的

​

​

然后，当我专注于它时，就会出现一个动画，它将用绿色边框包装我的整个输入框。因此，最终结果应该将输入框的整个边框涂成绿色。但是，使用我的css，顶部边框会超射我的输入箱，如下所示：

​

​

这是我的HTML和CSS：

​

@import url('https://fonts.googleapis.com/css?family=Damion|Muli:400,600');

input[type="text"] {
    font: 15px/24px "Lato", Arial, sans-serif;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
}

.effect-8
{
    border: 1px solid #ccc;
    padding: 7px 14px 9px;
    transition: 0.4s;
}
    /*top*/
    .effect-8 ~ .focus-border:before,
    /*bottom*/
    .effect-8 ~ .focus-border:after 
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #4caf50;
        transition: 0.3s;
    }

    /*bottom*/
    .effect-8 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        right: 0;
    }

    /*left*/
    .effect-8 ~ .focus-border i:before,
    /*right*/
    .effect-8 ~ .focus-border i:after 
     {
        content: "";
        position: absolute;
        top: 0;
        left: 15px;
        width: 2px;
        height: 0;
        background-color: #4caf50;
        transition: 0.4s;
    }

    .effect-8 ~ .focus-border i:after {
        left: auto;
        right: 15px;
        top: auto;
        bottom: 0;
    }

    .effect-8:focus ~ .focus-border:before,
    .effect-8:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.3s;
    }

    .effect-8:focus ~ .focus-border i:before,
    .effect-8:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.4s;
    }

<div class="row">
        <div class="col-sm">
            <div class="box cyan" style="width:100%;">
                <h2>Input Textbox</h2>
                <div class="row">
                    <div class="col-12">
                        <h4><i>Border Effects</i></h4>
                    </div>
          
                    <div class="col-3"  style="position: relative">
                        <input class="effect-8" type="text" placeholder="Input">
                        <span class="focus-border">
                            <i></i>
                        </span>
                    </div>
                  
                </div>
           
            </div>
        </div>
    </div>

​

Answer 1

您正在通过absolute定位创建边框动画，bit没有将父程序设置为relative，这就是为什么它在整个页面中泛滥的原因。其次，左和右边框元素的left和right值为15 of，这就是为什么它们没有与输入的边缘齐平的原因。

请参阅下面：(需要添加的其他CSS位于底部)

​

@import url('https://fonts.googleapis.com/css?family=Damion|Muli:400,600');

input[type="text"] {
    font: 15px/24px "Lato", Arial, sans-serif;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    letter-spacing: 1px;
}


.effect-8
{
    border: 1px solid #ccc;
    padding: 7px 14px 9px;
    transition: 0.4s;
}
    /*top*/
    .effect-8 ~ .focus-border:before,
    /*bottom*/
    .effect-8 ~ .focus-border:after 
    {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 2px;
        background-color: #4caf50;
        transition: 0.3s;
    }

    /*bottom*/
    .effect-8 ~ .focus-border:after {
        top: auto;
        bottom: 0;
        right: 0;
    }

    /*left*/
    .effect-8 ~ .focus-border i:before,
    /*right*/
    .effect-8 ~ .focus-border i:after 
     {
        content: "";
        position: absolute;
        top: 0;
        width: 2px;
        height: 0;
        background-color: #4caf50;
        transition: 0.4s;
    }

    .effect-8 ~ .focus-border i:after {
        left: auto;
        top: auto;
        bottom: 0;
    }

    .effect-8:focus ~ .focus-border:before,
    .effect-8:focus ~ .focus-border:after {
        width: 100%;
        transition: 0.3s;
    }

    .effect-8:focus ~ .focus-border i:before,
    .effect-8:focus ~ .focus-border i:after {
        height: 100%;
        transition: 0.4s;
    }
   
/* Add these styles */
/* Add these styles */
.col-3 {
  position:relative;
  padding:0;
}
.focus-border i::before {
  left: 0;
}
.focus-border i::after {
  right:0;
}

<div class="row">
        <div class="col-sm">
            <div class="box cyan" style="width:100%;">
                <h2>Input Textbox</h2>
                <div class="row">
                    <div class="col-12">
                        <h4><i>Border Effects</i></h4>
                    </div>
          
                    <div class="col-3">
                        <input class="effect-8" type="text" placeholder="Input">
                        <span class="focus-border">
                            <i></i>
                        </span>
                    </div>
                  
                </div>
           
            </div>
        </div>
    </div>

​

Answer 2

设置(位置:相对)在父(col-3)上。