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

css, html, pseudo-class, pseudo-element, textinput

Solution

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

Problem

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?

Original source