html – 是否有可能在css中创建一个带有1个尖端的1px边界输入字段？

我正在尝试为搜索框构建一个1px有边框的输入字段：hover和：focus伪类应用于它.问题是边界有一个尖的边.

是否可以仅在输入标签上仅使用CSS来正确执行此操作？ (这似乎是应用伪类的最直接的途径).

这是我到目前为止所得到的(虽然转换不适用于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伪元素,因为我不认为你可以将伪类应用于伪元素？

解决方法

这完全有可能.你也可以在没有变换的情况下完成它,这将使它在支持的所有浏览器中工作：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;
}