Html 设计一个具有扩展线的输入框

我正在尝试编写一个输入框，如下图所示

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

。侧栏搜索输入{
显示：内联块；
边框颜色：#ffd717-moz使用文本颜色#ffd717#ffd717；
边框样式：实心非实心；
边框宽度：2px02px0px；
颜色：#ffd717；
填充：15px 25px；
位置：相对位置；
溢出：隐藏；
}
.侧边栏搜索输入：：之前，
.侧边栏搜索输入：：之后{
内容：''；
宽度：2倍；
身高：160%；
位置：绝对位置；
前-30%；
背景色：#FFD717；
-webkit转换：所有0.3；
过渡：均为0.3秒；
z指数：9999；
}
.sidebar搜索输入：：之前{
左：10%；
}
.侧边栏搜索输入：：之后{
右：10%；
}

---

你非常接近。它看起来像

：：before

和

：：after

伪选择器不适用于

输入

元素，因此直接将其应用于

侧栏搜索

，并向该

div添加更多样式

。侧栏搜索{
/*指定位置、高度和宽度*/
位置：相对位置；
高度：50px；
宽度：175px；
}
.侧边栏搜索输入{
显示：内联块；
边框颜色：#ffd717-moz使用文本颜色#ffd717#ffd717；
边框样式：实心非实心；
边框宽度：2px02px0px；
颜色：#ffd717；
填充：15px 25px；
位置：相对位置；
顶部：5px；
溢出：隐藏；
}
.侧边栏搜索：：之前，
.侧边栏搜索：：之后{
内容：''；
宽度：2倍；
身高：160%；
位置：绝对位置；
前-30%；
背景色：#FFD717；
-webkit转换：所有0.3；
过渡：均为0.3秒；
z指数：9999；
}
.侧边栏搜索：：之前{
左：10px；/*根据图片，这些值更精确*/
}
.侧边栏搜索：：之后{
右：10px；/*根据图片，这些值更精确*/
}

---

谢谢您的建议。实际上我是新用户……）现在answare接受了。