我正在尝试为搜索框构建一个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; }