如何使用方框进行文本输入布局？

<div class="input-container">
  <input type="text" placeholder="请输入文本">
</div>

.input-container {
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  border-radius: 4px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.input-container input {
  border: none;
  background-color: transparent;
  width: 100%;
  outline: none;
}

const input = document.querySelector('input');

input.addEventListener('focus', () => {
  input.style.borderColor = 'blue';
});

input.addEventListener('blur', () => {
  input.style.borderColor = '#ccc';
});