2

I have a text input that I'd like to skew using transform:skewX()`. I want to have the input's borders skewed, while keeping the text inside un-skewed.

enter image description here

Here's the code that I've tried: 

#search{
    border:2px solid #323232;
    border-radius: 0;
    padding:3px 10px;
    -moz-transform: skewX(-40deg);
   -webkit-transform: skewX(-40deg);
   -o-transform: skewX(-40deg);
   -ms-transform: skewX(-40deg);
   transform: skewX(-40deg);
}
::-webkit-input-placeholder{
   -moz-transform: skewX(40deg);
   -webkit-transform: skewX(40deg);
   -o-transform: skewX(40deg);
   -ms-transform: skewX(40deg);
   transform: skewX(40deg); 
}

:-moz-placeholder { 
   -moz-transform: skewX(40deg);
   -webkit-transform: skewX(40deg);
   -o-transform: skewX(40deg);
   -ms-transform: skewX(40deg);
   transform: skewX(40deg);   
}

::-moz-placeholder {  
   -moz-transform: skewX(40deg);
   -webkit-transform: skewX(40deg);
   -o-transform: skewX(40deg);
   -ms-transform: skewX(40deg);
   transform: skewX(40deg);  
}

:-ms-input-placeholder {  
   -moz-transform: skewX(40deg);
   -webkit-transform: skewX(40deg);
   -o-transform: skewX(40deg);
   -ms-transform: skewX(40deg);
   transform: skewX(40deg); 
}
 <form id="search-form" action="/idee" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
                <input type="text" name="search" id="search" placeholder="Search" />
</form>
Kelderic
  • 6,502
  • 8
  • 46
  • 85
Simon M.
  • 2,244
  • 3
  • 17
  • 34
  • I am afraid to say so, but you can't. I suggest instead you use value="Search" to do so – divy3993 May 21 '15 at 12:47
  • 2
    Put your input inside a div and place the border onto that div and skew that and it the input text is still skewed then do the opposite skew to the input so it straightens it back up. also you would need to remove the border of the input. Or just use a background image. – Andrew May 21 '15 at 12:55

1 Answers1

2

Solution

We need to add another layer. In this case, I'd typically use a label element, wrapped around the input. We can give that outer label the border, and then skew it. Then we skew the inner input the exact opposite amount.

Code

#search {
    display:inline-block;
    border:2px solid #323232;
    border-radius: 0;
    padding:3px 10px;
    -moz-transform: skewX(-40deg);
   -webkit-transform: skewX(-40deg);
   -o-transform: skewX(-40deg);
   -ms-transform: skewX(-40deg);
   transform: skewX(-40deg);
}
#search input {
    border:0;
    box-shadow: none;
    -moz-transform: skewX(40deg);
   -webkit-transform: skewX(40deg);
   -o-transform: skewX(40deg);
   -ms-transform: skewX(40deg);
   transform: skewX(40deg);
}
 <form id="search-form" action="/idee" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="&#x2713;" />
                <label id="search"><input type="text" placeholder="Search" /></label>
</form>

Extra

I misunderstood your question initially and thought that you wanted the border to be skewed, and the placeholder text also skewed, but the final actual text NOT skewed. This is a bit more complex, but can be done, and since I already got it figured out, I'll just leave a Codepen link here: Codepen

Kelderic
  • 6,502
  • 8
  • 46
  • 85