表单样式
在 CSS 中，可以使用各种样式来美化表单元素，设置字体样式、颜色、边框等，使表单元素更具可读性和美观性。
笔记内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮廓线</title>
<style>
input{
/* 轮廓线：针对于表单 input，鼠标点击到 input 里后，input 四周出现的高亮边框 */
/* 详见：https://www.runoob.com/css/css-outline.html */
outline: none; /* 取消轮廓线 */
outline: green dotted thick; /* 绿色 点线 细的 */
/* 宽高 */
width: 200px;
height: 50px;
/* 背景 */
background: url("logo.png");
}
textarea{
/* 文本域取消拖拽缩放 */
resize: none;
font-family: Arial, sans-serif;
font-size: 14px;
color: #333;
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 10px;
width: 100%;
}
/* 定义表单元素在聚焦状态下的样式 */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
border-color: #007bff;
background-color: #f5f5f5;
}
</style>
</head>
<body>
<form action="">
<input type="text">
<textarea name="article" id="art" cols="30" rows="10"></textarea>
</form>
</body>
</html>
