CSS输入文本|极客教程

CSS输入文本

在网页设计中，输入文本是一个非常重要的元素，通过CSS可以对输入文本进行样式设置，包括字体、颜色、大小、对齐等。本文将详细介绍如何使用CSS来美化输入文本。

1. 设置字体样式

可以使用CSS来设置输入文本的字体样式，包括字体类型、大小、粗细等。下面是一些示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: bold;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your name">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了font-family属性来设置输入文本的字体类型为Arial，font-size属性设置字体大小为16px，font-weight属性设置字体粗细为bold。

2. 设置文本颜色

可以使用CSS来设置输入文本的颜色，可以是具体的颜色值，也可以是颜色名称。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  color: #ff0000;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your email">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了color属性来设置输入文本的颜色为红色（#ff0000）。

3. 设置文本对齐

可以使用CSS来设置输入文本的对齐方式，包括左对齐、右对齐、居中对齐等。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  text-align: center;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your message">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了text-align属性来设置输入文本的对齐方式为居中。

4. 设置文本边框

可以使用CSS来设置输入文本的边框样式，包括边框颜色、宽度、样式等。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  border: 2px solid #0000ff;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your address">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了border属性来设置输入文本的边框样式为2px宽的蓝色实线边框。

5. 设置文本背景

可以使用CSS来设置输入文本的背景样式，包括背景颜色、背景图片等。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  background-color: #ffff00;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your phone number">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了background-color属性来设置输入文本的背景颜色为黄色（#ffff00）。

6. 设置文本边框圆角

可以使用CSS来设置输入文本的边框圆角样式，使输入框看起来更加美观。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  border: 2px solid #00ff00;
  border-radius: 10px;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your message">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了border-radius属性来设置输入文本的边框圆角为10px。

7. 设置文本阴影

可以使用CSS来设置输入文本的阴影效果，使输入框看起来更加立体。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  box-shadow: 5px 5px 5px #888888;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your name">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了box-shadow属性来设置输入文本的阴影效果为5px偏移、模糊半径为5px、阴影颜色为灰色（#888888）。

8. 设置文本透明度

可以使用CSS来设置输入文本的透明度，使输入框看起来更加半透明。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  opacity: 0.5;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your email">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了opacity属性来设置输入文本的透明度为0.5。

9. 设置文本填充

可以使用CSS来设置输入文本的填充样式，包括内边距、外边距等。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  padding: 10px;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your address">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了padding属性来设置输入文本的内边距为10px。

10. 设置文本边框样式

可以使用CSS来设置输入文本的边框样式，包括实线、虚线、点线等。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  border: 2px dashed #ff00ff;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your phone number">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了border属性来设置输入文本的边框样式为2px宽的紫色虚线边框。

11. 设置文本输入框大小

可以使用CSS来设置输入文本框的大小，包括宽度和高度。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  width: 200px;
  height: 30px;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your message">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了width属性来设置输入文本框的宽度为200px，height属性设置高度为30px。

12. 设置文本输入框禁用状态

可以使用CSS来设置输入文本框的禁用状态，使用户无法输入内容。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:disabled {
  background-color: #cccccc;
  color: #999999;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your name" disabled>

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了:disabled伪类来设置输入文本框的禁用状态下的背景颜色为灰色（#cccccc），文字颜色为浅灰色（#999999）。

13. 设置文本输入框悬停效果

可以使用CSS来设置输入文本框的悬停效果，使用户在鼠标悬停时有视觉反馈。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:hover {
  border: 2px solid #ff0000;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your email">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了:hover伪类来设置输入文本框的悬停效果为红色边框。

14. 设置文本输入框聚焦效果

可以使用CSS来设置输入文本框的聚焦效果，使用户在输入框获得焦点时有视觉反馈。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input:focus {
  background-color: #ffffcc;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your address">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了:focus伪类来设置输入文本框的聚焦效果为黄色背景。

15. 设置文本输入框自动填充

可以使用CSS来设置输入文本框的自动填充效果，使用户在输入框中输入内容时能够自动填充。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input::placeholder {
  color: #999999;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your name">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了::placeholder伪元素来设置输入文本框的占位符文本颜色为灰色（#999999）。

16. 设置文本输入框清除按钮

可以使用CSS来设置输入文本框的清除按钮，使用户在输入内容后能够清除输入。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
  background-image: url('https://www.geek-docs.com/images/clear.png');
  background-position: right;
  background-repeat: no-repeat;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your email">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了background-image属性来设置输入文本框的清除按钮图标，background-position属性设置图标位置在右侧，background-repeat属性设置不重复显示。

17. 设置文本输入框光标样式

可以使用CSS来设置输入文本框的光标样式，使用户在输入内容时有不同的光标样式。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  cursor: pointer;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your message">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了““html
cursor: pointer;`属性来设置输入文本框的光标样式为手型光标。

18. 设置文本输入框边框圆角

可以使用CSS来设置输入文本框的边框圆角样式，使输入框的边框呈现圆角效果。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  border-radius: 10px;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your username">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了border-radius属性来设置输入文本框的边框圆角半径为10px。

19. 设置文本输入框背景渐变色

可以使用CSS来设置输入文本框的背景渐变色样式，使输入框的背景呈现渐变效果。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  background: linear-gradient(to right, #ffcc00, #ff6600);
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your password">

</body>
</html>

代码运行结果:

CSS输入文本

在上面的示例中，我们使用了background属性来设置输入文本框的背景为从左到右的线性渐变色，颜色从黄色（#ffcc00）渐变到橙色（#ff6600）。

20. 设置文本输入框阴影效果

可以使用CSS来设置输入文本框的阴影效果，使输入框呈现立体感。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
input {
  box-shadow: 2px 2px 5px #888888;
}
</style>
</head>
<body>

<input type="text" placeholder="Enter your message">

</body>
</html>

代码运行结果:

CSS输入文本