Как вы можете видеть на фрагменте, у меня как-то есть промежутки по углам. Мне нужно удалить интервал и сделать его похожим на обычную границу. это оно

form {
    width: 400px;
    height: 50px;
    display: flex;
    flex-direction: row;
    border: solid #D3D8E0 1px; 
    margin-bottom: 0px;
    border-radius: 8px;
}

input[type="email"] {
    flex-grow: 2;
    margin: 0px;
    padding: 0px;
    width: 100%;
    border: none;
}
input[type="submit"] {
    height: 44px;
    background: #0CB66E;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    margin: 3px 3px 0 0;
}
input[type="email"]:focus {
    outline: none;
}
<form id="form" action="https://www.freecodecamp.com/email-submit" method="GET">
       <input id="email" type="email" placeholder="Email" required>
       <input id="submit" type="submit" value="Get started">
</form>
0
Commander 7 Июл 2021 в 16:50

3 ответа

Лучший ответ

Вы забыли добавить border-radius в электронное письмо с типом ввода.

form {
    width: 400px;
    height: 50px;
    display: flex;
    flex-direction: row;
    border: solid #D3D8E0 1px; 
    margin-bottom: 0px;
    border-radius: 8px;
}

input[type="email"] {
    flex-grow: 2;
    margin: 0px;
    padding: 0px;
    width: 100%;
    border: none;
    border-radius: 8px;
}
input[type="submit"] {
    height: 44px;
    background: #0CB66E;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    margin: 3px 3px 0 0;
}
input[type="email"]:focus {
    outline: none;
}
<form id="form" action="https://www.freecodecamp.com/email-submit" method="GET">
       <input id="email" type="email" placeholder="Email" required>
       <input id="submit" type="submit" value="Get started">
</form>
2
Anthony Beaumecker 7 Июл 2021 в 13:54

Вход [type = "email"] имеет радиус границы 0, поэтому прорезает его. Измените его на это:

input[type="email"] {
flex-grow: 2;
margin: 0px;
padding: 0px;
width: 100%;
border: none;
border-radius: 6px;
}
0
Luke 7 Июл 2021 в 13:57
input[type="email"] {
    flex-grow: 2;
    margin: 0px;
    padding: 0px;
    width: 100%;
    border: none;
    border-radius: 6px 0 0 6px;
}
0
Ali HaMza 8 Июл 2021 в 06:01