首页 文章

用css计算文本输入的边框

提问于
浏览 次
2

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

要求是：

  • 流体宽度（延伸至容器宽度）

  • 边框颜色在焦点上发生变化

  • 边框颜色更改时出错

用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);
});

http://jsfiddle.net/4sKV9/

我不得不在div中包含一个输入，并使用图像来设置div：before和：after
显然：在这种情况下，active对div不起作用，因此我不得不用脚本切换一些类 .

我觉得必须有一些我想念的简单解决方案 . 有人能建议更好吗？

html css

2 回答

  • 2

    此解决方案使用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');
});
    回复于
  • 0

    编辑：你确实需要JS . ：before和：after之后无法应用于输入字段 . 请参阅web-tiki的回答 .

    在这种情况下，您不需要Javascript . ：focus是CSS中的有效伪类 . 看看这个article about :focus .

    input:focus {
    border-color: red;
}

    在伪类的帮助下：之前和之后，你也可以create arrows in pure css .

    回复于

相关问题