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

【问题标题】：I want to make my email text field like the one in the image我想让我的电子邮件文本字段像图像中的那样
【发布时间】：2021-11-02 17:26:18
【问题描述】：

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

【问题讨论】：

标签： wordpress forms button textfield form-submit

【解决方案1】：

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

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

【讨论】：

感谢@Muhammad Ibrar 的帮助。