我想知道如何使元素的边框不跨越元素的全长。我已经看到了一些使用 line-height 的建议，尽管这似乎对我不起作用（至少不适用于<ul>我正在使用的标签）。
这样做的一个流行示例是在http://android.com上的搜索，尽管我在 css 中找不到任何与之相关的内容，但它具有这种效果。
前任：
问问题
23043 次
5 回答
11
这是混合的另一种选择。box-shadow正在迅速成为我最喜欢的 CSS 新特性之一……
没有额外的标记，只有 CSS（也没有伪元素）......
演示：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.
很难解释，但很容易看出你是否只是玩这些价值观！
于 2013-09-09T20:25:40.357 回答
8
像这样的东西怎么样......由于伪元素和内容可编辑，它不是完全跨浏览器，但它是一个不同的解决方案 - 它可以工作。
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;
}
于 2013-09-09T20:14:44.643 回答
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;
}
这就是在左侧创建小蓝线的原因。
我收回我所说的关于伪元素的内容，因为它们不适用于输入......你应该使用包装器来正确实现这一点......
于 2013-09-09T19:53:11.257 回答
2
这是一种在输入元素周围使用包装器的方法。
假设您有以下 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/rLCa/
在此构造中，外部.input-wrap元素控制输入字段和底部边框的宽度，以及左边框的高度（本例中为 10px）。
输入字段绝对定位并固定到父容器的底部，并继承宽度。输入字段的高度是默认值，但您可以独立于.input-wrap元素中设置的高度来控制它。
于 2013-09-09T19:57:23.320 回答
0
另一种解决方案是将 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>
于 2013-09-09T20:15:31.133 回答