Skew Input Border Without Skewing Text Inside

Question

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.

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>

Answer 1

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