[Solved] Why does HTML element order influence CSS effects?

by


Instead of + it should be ~. With ~ the elements don’t need to be directly behind the input.

$(document).ready(function() {
    $('.input').append('<div class="expander"></div>');
});
.input {
    position: relative;
    height: 5.85714rem
}
.input input {
    outline: 0;
    width: 100%;
    border: none;
    background: 0 0;
    border-bottom: .07143rem solid rgba(0, 0, 0, .42);
    font-size: 1.14286rem;
    padding-bottom: .57143rem;
    position: absolute;
    bottom: 1.42857rem;
}
.input input:hover~label {
    color: rgba(0, 0, 0, .54)
}
.input input:active,
.input input:active:hover,
.input input:focus,
.input input:focus:hover,
.input input:hover {
    border-bottom: .14286rem solid rgba(0, 0, 0, .87);
    padding-bottom: .5rem
}
.input input:active~label,
.input input:focus~label {
    color: #304ffe;
    font-size: .85714rem;
    bottom: 3.85714rem
}
.input input:active~.expander,
.input input:focus~.expander {
    width: 100%;
    left: 0;
    height: .14286rem
}

.input label {
    color: rgba(0, 0, 0, .54);
    font-size: 1.14286rem;
    position: absolute;
    left: 0;
    bottom: 2.07143rem;
    font-weight: 400;
}
.input .expander {
    width: 0;
    background: #304ffe;
    position: absolute;
    height: .07143rem;
    left: 50%;
    bottom: 1.42857rem;
    -webkit-transition: all cubic-bezier(.4, 0, .2, 1) 3s;
    transition: all cubic-bezier(.4, 0, .2, 1) 3s
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="floating-input input">
    <input type="text" name="name" id="name">
    <label for="name">Name</label>
</div>

solved Why does HTML element order influence CSS effects?