文本框(input)获取焦点(onfocus)时样式改变的示例代码

下面是一个HTML和CSS结合的例子，展示了当文本框(input)获取焦点(onfocus)时，如何改变其样式。这里使用了`:focus`伪类选择器，它允许我们在元素获得焦点时应用样式，而无需JavaScript。

HTML部分:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input Focus Style Change</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<input type="text" placeholder="点击我获取焦点">

</body>
</html>

CSS部分 (`style.css`):


input[type="text"]:focus {
    /* 当文本框获取焦点时应用的样式 */
    border: 2px solid blue; /* 边框颜色变为蓝色 */
    box-shadow: 0 0 5px blue; /* 添加蓝色阴影 */
    outline: none; /* 移除默认的焦点轮廓 */
}

/* 可选的：为文本框设置基本样式 */
input[type="text"] {
    padding: 8px; /* 内边距 */
    border: 1px solid #ccc; /* 边框颜色 */
    border-radius: 4px; /* 边框圆角 */
    width: 200px; /* 宽度 */
}

在这个例子中，当文本框获得焦点时，它的边框颜色会变成蓝色，并且会有一个蓝色的阴影效果。同时，我们移除了默认的焦点轮廓(`outline: none;`)，因为有时候默认的轮廓样式会与我们的自定义样式冲突或显得不美观。当然，你也可以根据需求调整样式，比如改变边框宽度、颜色、阴影大小等。