焦点效果

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 9 课，共 43 课。

:focus 伪类可以让你在元素获得焦点时为它设置样式，比如点击元素或使用键盘上的 Tab 键切换到它时。这是突出显示你正在与之交互的元素的好方法！例如：

<input type="text">

当输入框获得焦点时，为它设置样式：

input {
  border: 2px solid #ccc;
}

input:focus {
  border-color: #4285f4;
  box-shadow: 0 0 5px rgba(66, 133, 244, 0.5);
}

当用户点击此输入框或通过按 Tab 键将焦点移到此输入框时，边框会变成蓝色，周围还会出现淡淡的蓝色阴影。

挑战

简单

创建一条 CSS 规则，在文本输入框获得焦点时应用特殊样式。

获得焦点时，将边框改为橙色 rgb(255, 152, 0)
获得焦点时，添加黄色背景色 rgb(255, 243, 224)

亲手试试

<!DOCTYPE html>
<html>
<head>
     <title>Focus Effects</title>
  <style>
    input{
      border: 2px solid gray;
      padding: 8px;
      outline: none;
    }
     /* Write your CSS here */
    
  </style>
</head>
<body>
  <h3>Focus Effects Demo</h3>
  <input type="text" placeholder="Type here...">
  <button>Click Me</button>
</body>
</html>