[分享]css中怎么弄搜索表单

发布于 2024-11-11 19:03:05

在网页中，搜索表单是非常常见的元素之一。使用 CSS 可以使搜索表单更加美观，增强用户体验。首先，在 HTML 文件中创建一个搜索表单： Search 然后，在 CSS 中可以对搜索表单进行样式设置...

在网页中，搜索表单是非常常见的元素之一。使用 CSS 可以使搜索表单更加美观，增强用户体验。

首先，在 HTML 文件中创建一个搜索表单：

<form>
  <input type="text" placeholder="Search">
  <button type="submit">Search</button>
</form>

然后，在 CSS 中可以对搜索表单进行样式设置，如下：

input[type="text"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background-color: #f2f2f2;
  padding: 10px;
  font-size: 16px;
  border-radius: 20px;
}

button[type="submit"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  outline: none;
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  font-size: 16px;
  border-radius: 20px;
  cursor: pointer;
}

代码解析：

对于 input[type="text"]，设置了无边框、无外边框、背景颜色为灰色、圆角 20px、字体大小为 16px、内边距为 10px。

对于 button[type="submit"]，设置了无边框、无外边框、背景颜色为绿色、颜色为白色、内边距为 10px 20px、字体大小为 16px、圆角 20px、鼠标悬浮样式为手型。

最后，将代码放在 HTML 文件中的 <head>标签中：

<!DOCTYPE html>
<html>
<head>
  <style>
    /*上面的代码放在这里*/
  </style>
</head>
<body>
  <form>
    <input type="text" placeholder="Search">
    <button type="submit">Search</button>
  </form>
</body>
</html>

这样，一个美观的搜索表单就完成了。

css 教程