倾斜的输入边框没有倾斜的文字里面 [英] Skew Input Border Without Skewing Text Inside

问题描述

我有一个使用 transform： skewX（）`倾斜的文本 input >。我希望输入的边框倾斜，同时保持文本不偏斜。

以下是我试过的代码：

  #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-formaction =/ ideeaccept-charset =UTF-8method =get>< input name =utf8type =hiddenvalue =&＃x2713; /> < input type =textname =searchid =searchplaceholder =Search/>< / form>

解决方案



我们需要添加另一个图层。在这种情况下，我通常使用一个标签元素，它们围绕输入。我们可以给外边的标签边框，然后将其倾斜。然后我们倾斜内部输入确切的相反数额。

---

代码

  #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-formaction =/ ideeaccept-charset =UTF-8method =get>< input name =utf8type =hiddenvalue =&＃x2713; /> < label id =search>< input type =textplaceholder =Search/>< / label>< / form>

我最初误解了你的问题，并认为你希望边框偏斜，并且占位符文本也偏斜了，但最终的实际文本没有偏斜。这有点复杂，但可以完成，因为我已经弄清楚了，我将在这里留下一个Codepen链接： Codepen

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>

解决方案

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

这篇关于倾斜的输入边框没有倾斜的文字里面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！