包装形式元素中的空格 [英] Whitespace in wrapped form element

问题描述

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

I'm creating a form with gradient borders. To protect against the borders being removed by the browser on autocomplete I've had to wrap all of the elements in a DIV containing their border. box-sizing is used to include the padding in the element size because there's a textarea too. My issue is now with the submit button.

.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>

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

When a user hovers over the button there's an issue where there's a slight edge. For ease having the border there all of the time makes more sense. Having the border there always means the button only needs to fill rather than having no border and being entirely fill (it causes size to momentarily change)

任何关于如何消除边缘上的小轮廓的想法都将受到赞赏，以便使按钮看起来真正充满.

Any ideas for how to get rid of this small outline on the edges would be appreciated so that the button looks truly filled.

您有时会在下面看到大纲.

You can see the outline appear occasionally below.

这里是静态的

推荐答案

可以吗?

.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>

这篇关于包装形式元素中的空格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！