我想让我的电子邮件文本字段像图片中的那样

Question

我想在我的表单中制作这种类型的字段和按钮，任何人都可以为此编写 CSS。

Answer 1

您应该自己尝试，如果您遇到任何问题，那么您应该 post 在这里发布，但如果您不知道如何去做，那么这里有一些代码可以帮助您。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
    *{
        background-color: #f2f2f2;
    }
input{
border-radius: 30px;
padding: 7px;
}
.btn{
    background-color:#303075;
    color:white;
    padding: 10px 25px;
    text-align: center;
    margin-left: -85px;
    border-radius: 30px;
    padding: 7px;


    
}
i::before{
    background:transparent;
}
.email-area{
    padding: 15px 50px;
    border-style: none;
    text-align: left;
    background-color: white;
   
}
    
}
</style>



<div class="container">
    <input type="text" class="email-area"  placeholder="Enter your email">
    <!-- <input type="button" class="btn font-awesome"  value="Submit" > -->
    <button class="btn"><i class="fa fa-send"></i> Submit</button>
</div>

我想让我的电子邮件文本字段像图片中的那样

I want to make my email text field like the one in the image

forms

wordpress

button

form-submit

textfield