HTML 输入字段边框小于包含它的 div

Question

我正在努力解决一个问题。我的输入字段边框（键入时）小于 div 字段（边框与占位符一样大），如下图所示。

输入字段的css代码如下：

.form_login_username
{
	position: relative;
	width: 100%;
	background-color: white;
	border-radius: 5px;
	border: 1.2px solid #4d4d4d;
	padding: 12px 20px;
	margin-bottom: 15px;
}

.form_login_username img
{
	position: absolute;
	top: 1px;
	left: 5px;
}

.form_login_username input
{
	border: none;
	width: 100%; 
	padding-left: 45;
	box-sizing: border-box;
}

输入框的html代码是这样的：

<div 
  class = "form_login_username">
  <img 
    src = "User_Icon.png" 
    width = "40" />
  <input 
    type = "text" 
    name = "username" 
    placeholder = "Enter your username" 
    required />			
</div>

我在我的 html 元素的样式部分设置了字段的颜色（当我输入时）：

input:focus
{
  border: none;
  outline: 1.2px solid #feb434;
}

请帮帮我，我不知道为什么边框这么小。 谢谢！

编辑：终于解决了我的问题。对于遇到此问题的其他人，只需将“填充”放入输入 css 样式，而不是 div css 样式。我的问题是，白色字段不是输入字段，而是 div 字段，因此将填充值放入您的输入 css 样式中，边框将出现在白色字段周围:)

Answer 1

添加 height 属性并根据需要设置它，例如 30px

.form_login_username input
{
border: none;
width: 100%; 
padding-left: 45;
box-sizing: border-box;
height: 30px;
}