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>

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

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

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

这里是静态的

标签： css

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>