边框不是css元素的全高

Question

我想知道如何使元素的边框不跨越元素的整个长度。我已经看到了一些使用行高的建议，虽然这对我来说似乎不起作用（至少没有使用我正在使用的<ul>标签）。

有人这样做的一个流行的例子是http://android.com的搜索，虽然我在css中找不到任何与之相关的内容，但却有这种效果。

例如：

Answer 1

这是混音的另一种选择。 box-shadow正迅速成为我最喜欢的新CSS功能之一......

没有额外的标记，只有CSS（没有伪元素）......

DEMO： http://jsfiddle.net/npsMx/2/

HTML

<input type="text" class="search" />

CSS

.search {
    border: 0px solid blue;
    border-bottom-width: 1px;
    -webkit-box-shadow: -5px 4px 0px -4px blue;
       -moz-box-shadow: -5px 4px 0px -4px blue;
            box-shadow: -5px 4px 0px -4px blue;
}

我们将box-shadow强制到左侧。将其设置为-5px会将左侧的宽度设置为...... -4px之后有效的随机播放会回到整个过程中，只留下一个像素可见（即等于我们的border-bottom-width。

难以解释但很容易看出你是否只是玩这些价值观了！

Answer 2

这样的事情怎么样......由于伪元素和满足感，它不是完全跨浏览器，但它是一个不同的解决方案 - 而且它有效。

<强> HTML

<!--// can't use pseudo elements on input, so let's make a div contenteditable //-->
<div class="foo" contenteditable></div>

<强> CSS

.foo {
    position: relative;
    width: 150px;    
}

.foo:after {
    position: absolute;
    top: 1em;
    left: 0;
    content: "";
    width: 150px;
    height: 0;
    border-bottom: 1px solid #bada55;
}
.foo:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    height: 0.5em;
    width: 1px;
    background: #bada55;
}

.foo:focus {
    outline: solid transparent;
}

<强> JSFiddle

Answer 3

看看你的例子中的标记：

<div class="search" id="search-container">
    <div class="search-inner">
        <div id="search-btn"></div>
        <div class="left"></div>
        <form action="/search/" id="search" name="search">
            <input id="q" name="q" placeholder="Search" speech="" type="text" x-webkit-speech="">
        </form>
   </div>
</div>

您正在寻找的是<div class="left"> ..看看CSS：

.search:hover .bottom, .search:hover .left, .search:hover .right {
    background-color: #33b5e5;
}

这就是在左侧创建小蓝线的原因..

我收回了我所说的关于伪元素的内容，因为它们无法使用输入...你应该使用包装器来正确实现这一点。

Answer 4

这是使用输入元素周围的包装器的一种方法。

假设您有以下HTML：

<div class="input-wrap">
    <input type="text" value="Search...">
</div>

应用以下CSS：

.input-wrap {
    display: inline-block;
    position: relative;
    border-bottom: 1px solid red;
    border-left: 1px solid red;
    height: 10px;
    width: 100px;
}
.input-wrap input {
    position: absolute;
    bottom: 0;
    left: 0;
    width: inherit;
    border: none;
    background-color: beige;
}

小提琴：http://jsfiddle.net/audetwebdesign/rLCHa/

在此构造中，外部.input-wrap元素控制输入字段和底部边框的宽度，以及左边框的高度（在此示例中为10px）。

输入字段绝对定位并固定到父容器的底部，并继承宽度。输入字段的高度是默认值，但您可以独立于.input-wrap元素中设置的高度来控制它。

Answer 5

另一个解决方案是将div绝对定位为左边框。

    .box {width:205px; position:relative;}
    .line {width:1px; height:10px; background:#ff0000; position:absolute; left:0; bottom:2px;}
    input {width:180px; background:#fff; color:#000; border:0; border-bottom:1px solid #ff0000; padding:5px 10px; position:absolute; left:1px; bottom:0;}

HTML

<div class="box">
<div class="line"></div>
<input type="text" value="Search" />
</div>

jsfiddle example