border-bottomが入力divラッパーに表示されない

Question

入力要素の境界線/アウトラインをカスタマイズして、div要素を親として配置したいと考えました。入力要素がフォーカスされているときに境界線が表示されるようにしたいが、今は境界線の下端が表示されていない。私はそれが何かによって切り離されていると思う。

Hereは

誰もがなぜ知っているフィドル例ですか？

JS：

$('input').focus(
    function(){ 
     $('.input-container').addClass('is-focused'); 
}).blur(
    function(){ 
     $('.input-container').removeClass('is-focused'); 
}); 

CSS：

.search * { 
    height: 35px; 
} 

.is-focused{ 
    border-style: solid; 
    border-color: #986fa5; 
} 

input:focus{ 
    outline-width: 0px; 
} 

input{ 
    padding: 0; 
    border: 0; 
} 

HTML：

<div class="search"> 
    <div class="input-container"> 
     <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" /> 
    </div> 
</div> 

Answer 1

境界が、同様の幅を必要とします。

$('input').focus(
 
    function() { 
 
     $('.input-container').addClass('is-focused'); 
 
    }).blur(
 
    function() { 
 
     $('.input-container').removeClass('is-focused'); 
 
    });

.search * { 
 
    height: 35px; 
 
} 
 
.is-focused { 
 
    border-width: 0 0 1px 0; /* top right bottom left */ 
 
    border-style: solid; 
 
    border-color: #986fa5; 
 
} 
 
input:focus { 
 
    outline-width: 0px; 
 
} 
 
input { 
 
    padding: 0; 
 
    border: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="search"> 
 
    <div class="input-container"> 
 
    <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" /> 
 
    </div> 
 
</div>

代替

代わりに、あなたにもJSせずにそれを行うことができます：

.search * { 
 
    height: 35px; 
 
} 
 

 
input:focus { 
 
    outline-width: 0px; 
 
    border-width: 0 0 1px 0; /* top right bottom left */ 
 
    border-style: solid; 
 
    border-color: #986fa5; 
 
} 
 
input { 
 
    padding: 0; 
 
    border: 0; 
 
    /* you might need to add this line to get the exact 
 
    same result as the answer above */ 
 
    width: 100%; 
 
}

<div class="search"> 
 
    
 
    <input type="text" name="query" class="searchbar" placeholder="What do you want to learn about?" /> 
 
    
 
</div>

Answer 2

私たちではないだろう入力枠線自体をカスタマイズしないのはなぜ

CSS

.search * { 
     height: 35px; 

} 

input{ 
     padding: 0; 
     border: 0; 
} 

input:focus{ 
     outline-width: 0px; 
     border-style: solid; 
     border-color: #986fa5; 
     border-width: 1px; 
}