CSS输入框代码|极客教程

CSS输入框代码

在网页开发中，输入框是常见的元素之一，用于用户输入文本、密码等信息。通过CSS样式可以美化输入框，使其更加吸引人。本文将介绍如何使用CSS代码来定制输入框的外观，包括边框样式、背景颜色、圆角等效果。

1. 基本输入框样式

首先，我们来看一下如何设置基本的输入框样式，包括边框、背景色和文字颜色等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Input Style</title>
<style>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333;
}
</style>
</head>
<body>
<input type="text" placeholder="Enter your text here">
</body>
</html>

Output:

CSS输入框代码

在上面的示例中，我们设置了输入框的内边距为10px，边框为1px实线，圆角为5px，背景色为浅灰色，文字颜色为深灰色。你可以根据需要调整这些值来定制输入框的外观。

2. 输入框悬停效果

接下来，我们来添加输入框的悬停效果，当鼠标悬停在输入框上时，改变其背景色和边框颜色。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Hover Effect</title>
<style>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333;
  transition: all 0.3s;
}
input:hover {
  background-color: #e9e9e9;
  border-color: #999;
}
</style>
</head>
<body>
<input type="text" placeholder="Hover over me">
</body>
</html>

Output:

CSS输入框代码

在上面的示例中，我们使用transition属性来实现平滑过渡效果，当鼠标悬停在输入框上时，背景色和边框颜色会发生变化。

3. 输入框聚焦效果

除了悬停效果，我们还可以为输入框添加聚焦效果，当输入框被聚焦时，改变其边框颜色和阴影效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Focus Effect</title>
<style>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333;
  transition: all 0.3s;
}
input:focus {
  border-color: #66afe9;
  box-shadow: 0 0 5px #66afe9;
}
</style>
</head>
<body>
<input type="text" placeholder="Click me">
</body>
</html>

Output:

CSS输入框代码

在上面的示例中，我们使用focus伪类来定义输入框聚焦时的样式，包括边框颜色和阴影效果。

4. 输入框圆角效果

如果你想要输入框的边角更加圆润，可以使用border-radius属性来设置圆角半径。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Border Radius</title>
<style>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 20px;
  background-color: #f9f9f9;
  color: #333;
}
</style>
</head>
<body>
<input type="text" placeholder="Rounded corners">
</body>
</html>

Output:

CSS输入框代码

在上面的示例中，我们将输入框的border-radius属性设置为20px，使其边角更加圆润。

5. 输入框阴影效果

为了让输入框看起来更加立体，我们可以为其添加阴影效果。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Box Shadow</title>
<style>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<input type="text" placeholder="Box shadow effect">
</body>
</html>

Output:

CSS输入框代码

在上面的示例中，我们使用box-shadow属性为输入框添加了一个淡淡的阴影效果，使其看起来更加立体。

6. 输入框透明效果

如果你想要输入框半透明，可以使用opacity属性来设置透明度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Opacity</title>
<style>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: rgba(249, 249, 249, 0.8);
  color: #333;
}
</style>
</head>
<body>
<input type="text" placeholder="Transparent input">
</body>
</html>

Output:

CSS输入框代码

在上面的示例中，我们将输入框的背景色设置为半透明的白色，通过rgba函数来定义颜色和透明度。

7. 输入框边框样式

除了基本的实线边框，我们还可以为输入框设置不同的边框样式，如虚线、双线等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Border Style</title>
<style>
input {
  padding: 10px;
  border: 2px dashed #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333;
}
</style>
</head>
<body>
<input type="text" placeholder="Dashed border style">
</body>
</html>

Output:

CSS输入框代码

在上面的示例中，我们将输入框的边框样式设置为虚线，通过dashed关键字来定义虚线样式。

8. 输入框背景图案

如果你想要为输入框添加背景图案，可以使用background-image属性来实现。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Background Image</title>
<style>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-image: url('https://www.geek-docs.com/images/bg-pattern.png');
  background-size: cover;
  color: #333;
}
</style>
</head>
<body>
<input type="text" placeholder="Background image pattern">
</body>
</html>

Output:

CSS输入框代码

在上面的示例中，我们将输入框的背景图案设置为一张图片，并通过background-size: cover;来保证图片完全覆盖输入框。

9. 输入框动画效果

为了增加交互性，我们可以为输入框添加动画效果，使其在特定事件下产生动态变化。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Animation</title>
<style>
input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  color: #333;
  transition: all 0.3s;
}
input:focus {
  transform: scale(1.1);
}
</style>
</head>
<body>
<input type="text" placeholder="Click me for animation">
</body>
</html>

Output:

CSS输入框代码

在上面的示例中，我们使用transform属性为输入框添加了一个缩放动画效果，当输入框被聚焦时，会放大1.1倍。

10. 输入框自定义样式

最后，我们可以通过自定义样式来完全改变输入框的外观，包括背景图案、边框样式、阴影效果等。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Input Style</title>
<style>
input.custom-input {
  padding: 15px;
  border: 2px solid #ff6600;
  border-radius: 10px;
  background-image: url('https://www.geek-docs.com/images/bg-pattern.png');
  background-size: cover;
  color: #ff6600;
  box-shadow: 0 0 10px rgba(255, 102, 0, 0.5);
}
input.custom-input:hover {
  background-color: #ff6600;
  color: #fff;
}
</style>
</head>
<body>
<input type="text" class="custom-input" placeholder="Custom input style">
</body>
</html>

Output:

CSS输入框代码