css3按钮聚焦状态处理
导读:在CSS3中,可以通过:focus伪类选择器来处理按钮的聚焦状态。以下是一个简单的示例: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <m...
在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
伪类选择器会将其背景颜色更改为红色。同时,我们还移除了按钮的默认轮廓线,以使其看起来更美观。
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: css3按钮聚焦状态处理
本文地址: https://pptw.com/jishu/704328.html