使用css改变input获取焦点时的样式
要使用CSS改变输入框在获得焦点时的样式，你可以使用:focus伪类选择器。以下是一个简单的例子，演示了如何改变一个输入框在获得焦点时的背景颜色和边框颜色。
/* 设置输入框在正常状态下的样式 */
input {
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
outline: none; /* 移除默认的轮廓线 */
}
/* 设置输入框在获得焦点时的样式 */
input:focus {
background-color: #f0f0f0;
border-color: #333;
box-shadow: 0 0 5px rgba(0,0,0,.2); /* 添加一个阴影以增强焦点的视觉效果 */
}在HTML中，你只需要正常地声明input标签，CSS会自动应用上述样式。
<input type="text" placeholder="点击这里输入内容">当用户点击这个输入框并且它获得焦点时，背景色会变成#f0f0f0，边框颜色变成#333，并且会有一个轻微的阴影来突出当前活动的输入框。
评论已关闭