4

我正在尝试为应用了伪类的搜索框构建一个带边框的1px输入字段。问题是边界有 1 个尖边。:hover:focus

(http://cl.ly/N357)

input是否可以仅在标签上仅使用 CSS 正确执行此操作？（这似乎是应用伪类最直接的途径）。

这是我到目前为止所得到的（虽然transform在 Chrome 中不起作用..）http://jsfiddle.net/robbschiller/pxytz/

.search {
    width: 30px;
    height: 32px;
    background: #fff;
    border: 1px solid #7d8082;
    border-left: 0;
    position: relative;
}

.search:before {
    content:"";
    position: absolute;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    width: 23px;
    height: 23px;
    border: 1px solid #7d8082;
    border-right: 0;
    border-top: 0;
    right: 63%;
    top: 4px;
}

这显然没有考虑悬停和焦点状态，这是问题的一部分。我试图避免使用:before伪元素，因为我认为您不能将伪类应用于伪元素？

4

3 回答 3

3

这是完全可能的。你也可以在没有转换的情况下做到这一点，这将使它在每个支持 :before 和 :after 伪类的浏览器中工作。您接近它的方式的一个问题是输入元素不允许使用 :before 和 :after 进行内容注入。它在某些浏览器中工作的事实是一个怪癖而不是标准。因此，您必须将输入包装在 div 或其他内容中。http://jsfiddle.net/jamesmfriedman/Zmd8y/

.search {
    display:inline-block;
    height: 32px;
    background: #fff;
    border: 1px solid #7d8082;
    border-left: 0;
    position: relative;
}

.search input {
    width: 30px;
    border:0;
    line-height: 32px;
    height: 32px;
}

.search:before, .search:after {
    content:'';
    position:absolute;
    top:-1px;
    width:0;
    height:0;
    left:-32px;
    border: 17px solid transparent;
}

.search:before {
    left: -34px;
    border-right-color: #7d8082;
}

.search:after {
    border-right-color: white;
    border-width: 16px;
    top:0;
}

.search:hover {
    border-color: #028DC3;
}

.search:hover:before {
    border-right-color:inherit;
}
于 2013-02-21T15:35:10.480 回答
2

http://jsfiddle.net/jRFNq/

您可以在输入字段周围包裹一个 div。现在 :before 元素起作用了。

<div id=wrapper><input class="search"></input></div>

#wrapper:before {
content:"";
position: absolute;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
width: 23px;
height: 23px;
border: 1px solid #7d8082;
border-right: 0;
border-top: 0;
left: 38px;
top: 56px;

}

变换弄乱了它的位置。所以要小心顶部和左侧。

于 2013-02-20T20:08:21.517 回答
0

对于一个input[type="search"]或文本，您可以使用以下label众所周知的技术创建一个三角形：http: //jsfiddle.net/pxytz/6/但在您编辑后，我发现这不是您想要实现的。

由 5 个线性渐变组成的线条呢？:)
仅使用 W3C 语法：http: //jsfiddle.net/pxytz/8/

于 2013-02-20T21:14:26.260 回答