我需要像这样设置文本输入的样式
要求是:
- 流体宽度(拉伸(stretch)至容器宽度)
- 焦点上边框颜色发生变化
- 出错时边框颜色发生变化
有没有一些简单的方法可以用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);
});
我必须将输入包装在 div 中,并使用 :before 和 :after 上的图像设置该 div 的样式
显然 :active 在这种情况下不适用于 div,因此我必须使用脚本切换某些类。
我觉得一定有一些我缺少的简单解决方案。 有人可以提出更好的建议吗?
最佳答案
此解决方案使用 jQuery 来检测 <input>
上的焦点并添加/删除.focused
父容器上的类。
左箭头和右箭头均由 CSS 制成,带有 2 <span>
元素和 :before
/:after
.
输入是响应式的并适应其容器的宽度。
<强> FIDDLE
HTML:
<div class="inpt">
<span class="left arrow"></span>
<input type="text" />
<span class="right arrow"></span>
</div>
CSS:
.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;
}
jQuery
$('input').focus(function () {
$(this).parent().addClass('focused');
});
$('input').blur(function () {
$(this).parent().removeClass('focused');
});
关于html - 使用 css 绘制文本输入的图形边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22893818/