html - 如何在不更改其大小的情况下将填充添加到文本字段？

我想通过将图标显示为背景图像来装饰文本字段（背景重复：不重复；）现在，我需要保持输入区域从右边开始的位置。我这样做是这样的：

body {
	max-width: 500px; }

#page {
	background-color: #0000FF;
}

input[type='text'] {
	background-color: #12eaec;
	font-size: 24px;
	padding: 4px 6px;
	width: 80%;}

#line2 {
	padding: 4px 30px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>padding text fields problem</title>
</head>
<body>
 <div id="page">
  <input type="text" id="line1" placeholder="1 ... width = 80%" />
  <input type="text" id="line2" placeholder="2 ... padded" />
  </div>
</body>
</html>

但这会导致下部（填充）的编辑字段变得比另一个更宽。

我该如何规避？

谢谢！

如何在不更改其大小的情况下将填充添加到文本字段？

0 个答案: