倾斜输入边框没有偏斜文本里面

Question

我有一个文本eval()，我想使用name1 = "person1" print eval(name1).name skewX（）`来扭曲。我希望输入的边框倾斜，同时保持文本内部不倾斜。

这是我尝试过的代码：

input

transform:

Answer 1

解决方案

我们需要添加另一个图层。在这种情况下，我通常使用围绕label的{​​{1}}元素。我们可以给那个外边input边界，然后歪斜它。然后我们将内部label倾斜到完全相反的数量。

代码

input

#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);
}

附加

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