Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.0k views
in Technique[技术] by (71.8m points)

css - Whitespace in wrapped form element

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>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

Is it ok?

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...