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

边框也需要宽度。

＆＃13;

＆＃13;

[HttpPost]
    public ActionResult Create(List<UserViewModel> viewModelList)
    {
        for (int i= 0; i > viewModelList.Count; i++) {
            for (int j = 0; j > viewModelList[i].Roles.Count; j++) {

                    db.UserDetails.Add(new User 
                    {
                        username = viewModelList[i].UserName,
                        level = viewModelList[i].Level,
                        location = viewModelList[i].Location,
                        role = viewModelList[i].Roles[j].RoleName,
                        Approval = "",
                        Request = "",
                        Active = "Y"
                    });
            }

            db.SaveChanges();
            return RedirectToAction("Index","Users");
        }          
        return View(viewModelList); // not right
    }

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

替代

作为替代方案，你可以在没有JS的情况下做到这一点：

＆＃13;

＆＃13;

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

＆＃13;

.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%;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

我不会使用Javascript，只需使用:focus伪选择器来设置输入样式：

<强> CSS

.search * {
      height: 35px;

}

input{
      padding: 0;
      border: 0;
}

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