CSS3 Skew Again! : Unskew text without parent div so form focus state is proper

问题

I have a simple problem, but I may be asking for the impossible.

I want to style my html form elements as parallelograms without skewing the contained text. I would normally do this by applying the transform to a parent div and applying the reverse transform to the content:

http://jsfiddle.net/ExUs9/3/

form {
    background:#62CAD9;
    padding:10px;
}
div {
    background: white;
    height: 30px;
    margin: 10px;
    width:300px;
    transform:skewX(30deg);
    -ms-transform:skewX(30deg); 
    -webkit-transform:skewX(30deg);
}
input {
    background: none;
    width: 100%;
    height: 100%;
    border: none;
    transform:skewX(-30deg);
    -ms-transform:skewX(-30deg); 
    -webkit-transform:skewX(-30deg);
}

My problem with the above is the focus property is still applied to the unskewed input box and displays as rectangular. The focus effect is only skewed if the input box itself is skewed:

http://jsfiddle.net/kdqKX/

form {
    background:#62CAD9;
}

input {
    margin: 20px;
    background: white;
    width:300px;
    border: none;
    height: 30px;
    transform:skewX(30deg);
    -ms-transform:skewX(30deg); 
    -webkit-transform:skewX(30deg);
}

The problem here is that the text is skewed.

I know I could just remove the focus outline, but is there any way to either:

Skew the input box--but not the contained text--without skewing via a parent div
Apply the border to the parent div when the child input box is focused

I don't know js or any scripts well, so a script free solution is preferred. I do, though, suspect this is impossible in pure css, so let me know any possible solutions.

Thank you, you brave internet geniuses,

Dalton

回答1:

The easy solution would be a background image.
CSS gradient can fake this.

background-image:linear-gradient(45deg,  #62cad9 0 , #62cad9 2em , transparent 2em ,transparent 230px, #62cad9 230px );

Try it without transform. http://jsfiddle.net/khGDj/ other easy way, would have been width pseudo-element and borders/blue/transparent. input do not take it as far as i know.

来源：https://stackoverflow.com/questions/16910275/css3-skew-again-unskew-text-without-parent-div-so-form-focus-state-is-proper

标签

forms

css3

focus

transform

skew