这篇博客介绍了如何使用CSS动态伪类选择器实现输入框的交互效果。通过设置`:hover`和`:focus`，当鼠标悬浮在输入框上时，输入框边框变为红色；当用户名输入框获得焦点时，背景变为橘色；密码输入框获得焦点时，背景变为黄色。文章提供了完整的HTML和CSS代码示例。
2-17 编程练习
根据gif效果图（ focus.gif），写出代码，实现：
（1） 当鼠标悬浮在输入框上时，输入框边框颜色为红色
（2） 当用户名输入框获得焦点时，输入框背景颜色变为橘色
当密码输入框获得焦点时，输入框背景颜色变为黄色。
任务
第一步：先写出html代码，写出用户名输入框和密码输入框
第二步：给两个输入框设置样式：当鼠标悬停在输入框上时，输入框的边框颜色变为红色
提示：可以用到动态伪类选择器：hover
第三步：给用户名输入框设置样式，当焦点在该输入框上时，背景颜色变为橘色
提示：可以用到动态伪类选择器：focus
第四步：给密码输入框设置样式，当焦点在该输入框上时，背景颜色变为黄色
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>动态伪类</title>
<style type
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
