如何从html输入表单中设置搜索结果的样式

<form>
  <input type="text" name="search" placeholder="搜索...">
  <input type="submit" value="搜索">
</form>

.search-results {
  background-color: #f5f5f5;
  padding: 10px;
  border: 1px solid #ccc;
}

.search-results h3 {
  color: #333;
  font-size: 18px;
}

.search-results p {
  color: #666;
  font-size: 14px;
}

document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var keyword = document.querySelector('input[name="search"]').value;

  // 使用AJAX发送搜索请求
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/search?keyword=' + keyword, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var results = JSON.parse(xhr.responseText);

      // 清空搜索结果
      var searchResults = document.querySelector('.search-results');
      searchResults.innerHTML = '';

      // 插入搜索结果
      results.forEach(function(result) {
        var resultElement = document.createElement('div');
        resultElement.classList.add('search-result');

        var titleElement = document.createElement('h3');
        titleElement.textContent = result.title;

        var contentElement = document.createElement('p');
        contentElement.textContent = result.content;

        resultElement.appendChild(titleElement);
        resultElement.appendChild(contentElement);

        searchResults.appendChild(resultElement);
      });
    }
  };
  xhr.send();
});