Skew Input Border Without Skewing Text Inside <p>I have a text <code>input</code> that I'd like to skew using <code>transform:</code>skewX()`. I want to have the input's borders skewed, while keeping the text inside un-skewed.</p> <p><img src="https://i.stack.imgur.com/OmWJj.png" alt="enter image description here"></p> <p>Here's the code that I've tried: <div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>#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); }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;form id="search-form" action="/idee" accept-charset="UTF-8" method="get"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt; &lt;input type="text" name="search" id="search" placeholder="Search" /&gt; &lt;/form&gt;</code></pre> </div> </div> </p>