html彩色输入框

64次阅读
没有评论

在HTML中,可以使用CSS样式为输入框添加颜色。可以使用 background-color 属性来指定输入框的背景色,使用 color 属性来指定输入框中文本的颜色。还可以使用 border-color 属性来指定输入框边框的颜色。

下面是一个HTML页面的示例,展示如何使用CSS样式来为输入框添加彩色:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>彩色的输入框示例</title>
	<style>
		input[type="text"], textarea {
			background-color: #f2f2f2;
			color: #333;
			border: 1px solid #ccc;
			padding: 5px;
			font-size: 16px;
			font-family: Arial, sans-serif;
		}
		
		input[type="text"]:focus, textarea:focus {
			background-color: #fff;
			border: 1px solid #4CAF50;
		}
	</style>
</head>
<body>
	<form>
		<p>
			<label for="name">姓名:</label>
			<input type="text" id="name" name="name">
		</p>
		<p>
			<label for="message">留言:</label>
			<textarea id="message" name="message"></textarea>
		</p>
		<p>
			<input type="submit" value="提交">
		</p>
	</form>
</body>
</html>

在这个示例中,我们使用CSS样式为输入框添加了彩色。我们选择所有 type 为 text 的输入框和所有文本区域 textarea,并为其设置了一组共同的样式:

  • background-color: #f2f2f2:指定输入框的背景色为淡灰色。
  • color: #333:指定输入框中文本的颜色为深灰色。
  • border: 1px solid #ccc:指定输入框的边框样式为1像素的实线边框,颜色为灰色。
  • padding: 5px:指定输入框内容与边框之间的距离为5像素。
  • font-size: 16px:指定输入框中的字体大小为16像素。
  • font-family: Arial, sans-serif:指定输入框中的字体为Arial或sans-serif字体系列中的任意一种。

我们还为输入框添加了一个 :focus 伪类,指定输入框在获取焦点时的样式:

  • background-color: #fff:指定输入框的背景色为白色。
  • border: 1px solid #4CAF50:指定输入框的边框颜色为绿色。

这样,当用户点击或将鼠标移动到输入框上时,输入框将变为白色,并且边框将变为绿色,增加了互动性和美观性。

正文完
 
评论(没有评论)