Is it possible to make a 1px bordered input field with 1 pointed side purely in css?

Question

I'm trying to build a 1px bordered input field for a search box with :hover and :focus pseudo-classes applied to it. The catch is that the border has 1 pointed side.

Is it possible to do this properly using only CSS on only the input tag? (It seems to be the most direct route for applying the pseudo-classes).

Here's what I've got so far (although the transform isn't working in 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;
}

This is obviously not taking into account the hover and focus states, which is part of the problem. I'm trying to avoid using the :before pseudo-element because I don't think you can apply pseudo-classes to pseudo-elements?

Answer 1

it is totally possible. You can do it without transforms too, which will make it work in every browser that supports :before and :after pseudo classes. A problem with the way you were approaching it is input elements don't allow content injection with :before and :after. The fact that it works in some browsers is a quirk and not standard. So, you will have to wrap the input in a div or something else. 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;
}

Answer 2

http://jsfiddle.net/jRFNq/

You can wrap a div around the input field. Now the :before element works.

<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;

}

The transform messes up the position of it. So be careful with the top and left.

Answer 3

For an input[type="search"] or text, you could use the label to create a triangle with a well-known technique like in: http://jsfiddle.net/pxytz/6/ but after your edit I see that's not what you're trying to achieve.

What about lines made of 5 linear gradients? :)
With only the W3C syntax: http://jsfiddle.net/pxytz/8/