0

我有一个简单的问题，但我可能要求的是不可能的。

我想将我的 html 表单元素设置为平行四边形，而不会使包含的文本倾斜。我通常会通过将转换应用于父 div 并将反向转换应用于内容来做到这一点：

http://jsfiddle.net/ExUs9/3/

form {
    background:#62CAD9;
    padding:10px;
}
div {
    background: white;
    height: 30px;
    margin: 10px;
    width:300px;
    transform:skewX(30deg);
    -ms-transform:skewX(30deg); 
    -webkit-transform:skewX(30deg);
}
input {
    background: none;
    width: 100%;
    height: 100%;
    border: none;
    transform:skewX(-30deg);
    -ms-transform:skewX(-30deg); 
    -webkit-transform:skewX(-30deg);
}

我的问题是焦点属性仍然应用于未倾斜的输入框并显示为矩形。仅当输入框本身倾斜时，焦点效果才会倾斜：

http://jsfiddle.net/kdqKX/

form {
    background:#62CAD9;
}

input {
    margin: 20px;
    background: white;
    width:300px;
    border: none;
    height: 30px;
    transform:skewX(30deg);
    -ms-transform:skewX(30deg); 
    -webkit-transform:skewX(30deg);
}

这里的问题是文本倾斜。

我知道我可以删除焦点轮廓，但是有没有办法：

  1. 倾斜输入框 - 但不是包含的文本 - 不通过父 div 倾斜
  2. 当子输入框获得焦点时，将边框应用到父 div

我不太了解js或任何脚本，因此首选无脚本解决方案。不过，我确实怀疑这在纯 css 中是不可能的，所以让我知道任何可能的解决方案。

谢谢你们，勇敢的互联网天才们，

道尔顿

4

1 回答 1

2

简单的解决方案是背景图像。
CSS渐变可以伪造这一点。

background-image:linear-gradient(45deg,  #62cad9 0 , #62cad9 2em , transparent 2em ,transparent 230px, #62cad9 230px );

尝试不转换。http://jsfiddle.net/khGDj/ 其他简单的方法，将是宽度伪元素和边框/蓝色/透明。据我所知，输入不要采取它。

于 2013-06-04T07:01:45.180 回答