css - 包装的表单元素中的空白

Question

我正在创建一个带有渐变边框的表单。为了防止浏览器在自动完成时删除边框，我不得不将所有元素包装在包含它们的边框的 DIV 中。 box-sizing用于在元素大小中包含填充，因为也有一个 textarea。我的问题现在是提交按钮。

.input-container {
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    margin-bottom: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    padding: 15px;
    display: inline-block;
    border: none;
    outline: none;
    border-radius: 30px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background: #FFFFFF;
}

input[type=submit]:hover {
    background-image: linear-gradient(-45deg, #006699, #9900CC);
    color: #FFFFFF;
}

<div class="input-container">
<input type="submit" name="submit" id="submit" value="Submit" required>
</div>

当用户将鼠标悬停在按钮上时，会出现轻微边缘的问题。为方便起见，始终在那里设置边界更有意义。有边框总是意味着按钮只需要填充而不是没有边框并完全填充(它会导致大小暂时改变)

任何关于如何摆脱边缘上的小轮廓的想法将不胜感激，以便按钮看起来真正填充。



您可以看到轮廓偶尔出现在下方。



这里是静态的

Answer 1

可以吗？

.input-container:hover {
border: none;

}

.input-container {
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 30px;
    margin-bottom: 10px;
    overflow: hidden;
    border: solid 5px transparent;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    padding: 15px;
    display: inline-block;
    border: none;
    outline: none;
    border-radius: 30px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background: #FFFFFF;
}

.input-container:hover input[type=submit] {
    background-image: linear-gradient(-45deg, #006699, #9900CC);
    color: #FFFFFF;
padding:30px 15px;
    padding: 20px 15px;
}

  <div class="input-container">
    <input type="submit" name="submit" id="submit" value="Submit" required>
    </div>