我的HTML:
<div id="composite-field">
<input type='email' name='email' class='input animate' value='' placeholder='E-mail'>
<input type='submit' id='submit' class='submit animate' value='>'>
</div>
我的CSS:
.animate { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
html body div.body-container form div#composite-field {
position: relative; float: left;
width: 80%; height: 100px; margin: 0 10%; padding: 0;
}
html body div.body-container form div#composite-field input[type=email] {
float: left;
width: 90%; height: 100px; margin: 0; padding: 0 6% 0 4%;
border: 0; outline: none;
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
background-color: #eab94e; color: rgba(26, 60, 88, 0.9);
z-index: 10;
}
html body div.body-container form div#composite-field input[type=submit] {
position: absolute; float: none; clear: both; top: 0; right: 5%;
min-width: 80px; width: auto; height: 100px; margin: 0; padding: 0;
border: 0; border-radius: 0; outline: none; -webkit-appearance: none;
background-color: #2e4856; color: #eab94e;
z-index: 11;
}
html body div.body-container form div#composite-field input[type=email],
html body div.body-container form div#composite-field input[type=submit] { font-family: "Fjalla One", sans-serif; font-weight: 400; font-size: 40px; letter-spacing: normal; }
html body div.body-container form div#composite-field input[type=email]:focus {
box-shadow: inset 0 0 0 5px rgba(26, 60, 88, 0.9);
}
html body div.body-container form div#composite-field input[type=submit]:hover { opacity: 0.5; }
现在问题在于,20%的宽度不会动画。以前工作过。我似乎无法弄清楚为什么现在不是......
html body div.body-container form div#composite-field input[type=email]:focus ~ input[type=submit] { width: 20%; }
我的css在哪里出错?
感谢。
答案 0 :(得分:1)
问题是您的提交按钮的宽度为&#34; auto&#34;,正在转换为80%(宽度仅设置为最小宽度)。如果在其上设置宽度,则转换将起作用。这是一个小提琴: http://jsfiddle.net/znm63rky/15/
html body div.body-container form div#composite-field input[type=submit] {
width: 80px;
}