CSS3歪斜！ ：Unskew文本没有父div，所以表单焦点状态是正确的 [英] CSS3 Skew Again! : Unskew text without parent div so form focus state is proper

问题描述

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

我想将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）; 
} 
输入{
 background：none; 
 width：100％; 
 height：100％; 
 border：none; 
 transform：skewX（-30deg）; 
 -ms-transform：skewX（-30deg）; 
 -webkit-transform：skewX（-30deg）; 
} 
  

我的问题是focus属性仍然应用于unskewed输入框并显示为矩形。

http://jsfiddle.net/kdqKX/

 表单{
 background：＃62CAD9; 
} 
 
输入{
 margin：20px; 
 background：white; 
 width：300px; 
 border：none; 
 height：30px; 
 transform：skewX（30deg）; 
 -ms-transform：skewX（30deg）; 
 -webkit-transform：skewX（30deg）; 
} 
  

这里的问题是文本偏斜。

我知道我可以删除焦点轮廓，但是有任何方法：

2. 当子输入框集中时，将边框应用到父div
$ b $ b

我不知道js或任何脚本，所以一个免费的脚本解决方案是首选。 [/ p>

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

Dalton

解决方案

简单的解决方案是背景图片。

CSS渐变可以假冒这个。

  background-image：linear-gradient（45deg，＃62cad9 0，＃62cad9 2em，透明2em，透明230像素，＃62cad9 230px）; 
  

无需转换即可尝试。 http://jsfiddle.net/khGDj/
其他简单的方法，元素和边框/蓝色/透明。输入并不是我所知道的。

I have a simple problem, but I may be asking for the impossible.

I want to style my html form elements as parallelograms without skewing the contained text. I would normally do this by applying the transform to a parent div and applying the reverse transform to the content:

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

My problem with the above is the focus property is still applied to the unskewed input box and displays as rectangular. The focus effect is only skewed if the input box itself is skewed:

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

The problem here is that the text is skewed.

I know I could just remove the focus outline, but is there any way to either:

1. Skew the input box--but not the contained text--without skewing via a parent div
2. Apply the border to the parent div when the child input box is focused

I don't know js or any scripts well, so a script free solution is preferred. I do, though, suspect this is impossible in pure css, so let me know any possible solutions.

Thank you, you brave internet geniuses,

Dalton

解决方案

The easy solution would be a background image.
CSS gradient can fake this.

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

Try it without transform. http://jsfiddle.net/khGDj/ other easy way, would have been width pseudo-element and borders/blue/transparent. input do not take it as far as i know.

这篇关于CSS3歪斜！ ：Unskew文本没有父div，所以表单焦点状态是正确的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！