Html 使用css输入文本的图形边框

我需要像这样设置文本输入的样式

要求如下：

流体宽度（延伸到容器宽度）

焦点上的边框颜色变化

错误时边框颜色更改

有什么简单的方法可以用css来实现吗

我现在提出的是一个非常复杂的问题，需要js，而且工作起来不太顺利-

<div class="inpt"><input type="text" /></div>

jQuery(".inpt").delegate("*", "focus blur", function() {
    var elem = jQuery(this);
    var elem2 = jQuery(this).parent();
    setTimeout(function() {
        elem2.toggleClass("focused", elem.is(":focus"));
    }, 0);
});

jQuery（“.inpt”）.delegate（“*”，“焦点模糊”，函数（）{
var elem=jQuery（this）；
var elem2=jQuery（this.parent（）；
setTimeout（函数（）{
elem2.toggleClass（“聚焦”，elem.is（“：聚焦”）；
}, 0);
});

我必须将输入包装在一个div中，并在：before和：after上使用图像设置该div的样式
显然：在本例中，active不适用于div，因此我必须使用脚本切换某些类

我觉得一定有一些简单的解决办法，我错过了。

---

有人能提出更好的建议吗？

编辑：您确实需要JSbefore和：after不能应用于输入字段。请参阅web tiki的答案

在这种情况下，您不需要Javascript：焦点在CSS中是一个有效的伪类。看看这个

---

借助伪类：before和：after也可以。

此解决方案使用jQuery检测父容器上的

焦点，并添加/删除

.focused

类

左右行都是由CSS组成的，有2个

元素和

:before

/

:before

输入响应迅速，并适应其容器的宽度

HTML:

<div class="inpt"> 
    <span class="left arrow"></span>
    <input type="text" /> 
    <span class="right arrow"></span>
</div>

jQuery

$('input').focus(function () {
    $(this).parent().addClass('focused');
});

$('input').blur(function () {
    $(this).parent().removeClass('focused');
});

---

你不明白问题出在哪里，你也没有检查我的小提琴。我已经使用了：before和：after。但您必须知道：before和：after元素不适用于输入。所以我必须将它们应用于包装器div。但不能将：focus或：active应用于div，而是将其应用于输入。但是样式绑定到包装器div，因此您需要一些js来检查输入是否有焦点，然后在包装器div上切换类。这就是我所做的，它可以工作，但我仍然在寻找一个更优雅的解决方案。您建议的css箭头不会有帮助，因为您只能与它们成45度角。关于：之前和：之后，我的错误，您是对的。但是你可以使CSS箭头的角度小于或大于45度。你能改变箭头的角度吗？@Andrey你的意思是使它们的宽度变小吗？我的意思是使它们像我原来问题中的图像一样。我必须按照设计来做。@Andrey抱歉耽搁了这么久，我还有其他事情要做这里是小提琴：web tiki谢谢你的输入。这个解决方案并不完美，但我会将其标记为已接受，因为似乎找不到更好的解决方案。我只想提一下缺点-1。两个额外的跨度；2.边框看起来有点扭曲（尤其是在浏览器中放大时）。无论如何，再次感谢！

.inpt {
    position:relative;
    margin:5%;
    width:50%;
}
.left, .right {
    position: absolute;
    top:14px;
}
.right {
    right:0;
}
.arrow:after, .arrow:before {
    top: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow:after {
    border-color: rgba(255, 255, 255, 0);
    border-width: 12px;
    margin-top: -12px;
}
.arrow:before {
    border-color: rgba(220, 228, 228, 0);
    border-width: 15px;
    margin-top: -15px;
}
.left:after, .left:before {
    right: 100%;
}
.left:after {
    border-right-color: #fff;
}
.left:before {
    border-right-color: #dce4e4;
}
.right:after, .right:before {
    left: 100%;
}
.right:after {
    border-left-color: #fff;
}
.right:before {
    border-left-color: #dce4e4;
}
.focused input {
    border-color: #afddda;
}
.focused .right:before {
    border-left-color: #afddda;
}
.focused .left:before {
    border-right-color: #afddda;
}
input {
    border-top: 2px #dce4e4 solid;
    border-bottom: 2px #dce4e4 solid;
    border-left:none;
    border-right:none;
    padding:2px 10px 0px;
    height: 29px;
    display: block;
    outline: 0;
    width: 100%;
    margin: 6px 0;
    box-sizing:border-box;
}

$('input').focus(function () {
    $(this).parent().addClass('focused');
});

$('input').blur(function () {
    $(this).parent().removeClass('focused');
});