这是我的 CSS:
.light .contact_form_widget input:focus,.light .contact_form_widget textarea:focus,.light #commentform input:focus,.light #commentform textarea:focus,.light #contactform input:focus,.light #contactform textarea:focus{
transition:all .2s ease-in-out;
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
-webkit-backface-visibility:hidden
}
为什么当我取消输入或文本区域的焦点时此 CSS 转换不起作用?过渡适用于链接、图像悬停叠加...
[我删除了链接,问题不需要,这只是一个例子]。
编辑:这是CSS的另一部分(我之前没有发布,我不知道为什么,可能是太明显了):
.light .contact_form_widget input:focus,.light .contact_form_widget textarea:focus,.light #commentform input:focus,.light #commentform textarea:focus,.light #contactform input:focus,.light #contactform textarea:focus{
background:#FFF;border:1px solid #BBB;
box-shadow:inset 0 0 5px rgba(0,0,0,0.13);
-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.13);
-moz-box-shadow:inset 0 0 5px rgba(0,0,0,0.13)
}
最佳答案
像这样尝试 Demo
CSS:
input[type=text]{
background-color: #f2f2f2;
border:1px solid #ccc;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out
}
input[type=text]:focus {
border-color: #777;
color: #000;
background: #fff;
outline: 0
}
你需要为正常状态而不是焦点提供动画
关于css - 为什么当我不关注输入时,这个 CSS3 转换不起作用? ( :focus),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24822659/