html - 设计一个带有延长线的输入框

Question

我正尝试编写如下图所示的输入框。

但是，我最终只得到了当前代码的部分行。当它是一个按钮而不是一个编辑时，一切都很好。

.sidebar-search input {
    display: inline-block;
    border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
    border-style: solid none solid solid;
    border-width: 2px 0 2px 0px;
    color: #ffd717;
    padding: 15px 25px;
    position: relative;
    overflow: hidden;
}

.sidebar-search input::before,
.sidebar-search input::after {
    content: '';
    width: 2px;
    height: 160%;
    position: absolute;
    top: -30%;
    background-color: #FFD717;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 9999;
}

.sidebar-search input::before {
    left: 10%;
}

.sidebar-search input::after {
    right: 10%;
}

<div class="right-sidebar-area">
  <div class="single-right-sidebar">
    <div class="sidebar-search">
      <input type="text" name="Search">
    </div>
  </div>
</div>

Answer 1

你们很亲近。看起来 ::before 和 ::after 伪选择器不适用于 input 元素，所以直接将它应用于 sidebar-search 并向该 div

添加更多样式

.sidebar-search {
  /*specify positioning, height and width */
  position: relative;
  height: 50px;
  width: 175px;
}

.sidebar-search input {
    display: inline-block;
    border-color: #ffd717 -moz-use-text-color #ffd717 #ffd717;
    border-style: solid none solid solid;
    border-width: 2px 0 2px 0px;
    color: #ffd717;
    padding: 15px 25px;
    position: relative;
    top: 5px;
    overflow: hidden;
}

.sidebar-search::before,
.sidebar-search::after {
    content: '';
    width: 2px;
    height: 160%;
    position: absolute;
    top: -30%;
    background-color: #FFD717;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 9999;
}

.sidebar-search::before {
    left: 10px; /*these values are more accurate according to the picture */
}

.sidebar-search::after {
    right: 10px; /*these values are more accurate according to the picture */
}

<div class="right-sidebar-area">
  <div class="single-right-sidebar">
    <div class="sidebar-search">
      <input type="text" name="Search">
    </div>
  </div>
</div>