Cannot get the right position in css

Question

I've been at this for the whole day already. I am creating an animation to wrap my whole input text as soon as it gets a focus. This is how it looks at the beginning

Then, as soon as I focus on it, an animation should occur that will wrap my whole input box with green border. So the end result should color the whole border of the input box green. But with my css, the top border overshoots the my inputbox like so:

This is my HTML and 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>

score 3 · Answer 1 · answered Jan 13 '22 at 09:48

3

Set (position: relative) on the parent (col-3)

answered Jan 13 '22 at 09:48

Saeed.Modarresi

119
4

score 3 · Accepted Answer · answered Jan 13 '22 at 09:49

You're creating the border animation via an absolute positioning, bit haven't set the parent to be relative, which is why it's overflowing across the whole page. Secondly, the left and right border elements have a left and right value of 15px, which is why they're not flush with the edge of the input.

See below: (additional CSS that needs adding is at the bottom)

@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>

Thank you so much Sir. Can't believe it took you minutes only. Wow! — Ibanez1408, Jan 13 '22 at 10:00

Cannot get the right position in css

2 Answers2