css3按钮聚焦状态处理

avatar
作者
筋斗云
阅读量:0

在CSS3中,可以通过:focus伪类选择器来处理按钮的聚焦状态。以下是一个简单的示例:

HTML代码:

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Button Focus Example</title>     <link rel="stylesheet" href="styles.css"> </head> <body>     <button class="my-button">Click me</button> </body> </html> 

CSS代码 (styles.css):

.my-button {   background-color: blue;   color: white;   padding: 10px 20px;   border: none;   cursor: pointer;   outline: none; }  .my-button:focus {   background-color: red; } 

在这个示例中,我们创建了一个名为.my-button的按钮。当按钮聚焦时(例如,通过点击或使用Tab键导航到按钮),:focus伪类选择器会将其背景颜色更改为红色。同时,我们还移除了按钮的默认轮廓线,以使其看起来更美观。

广告一刻

为您即时展示最新活动产品广告消息,让您随时掌握产品活动新动态!