Primer CSS 选中状态

Primer 是 GitHub 为开发者提供的 CSS 框架，是一组跨平台的 Web 组件，具有可定制性、易扩展等特点。其中，Primer 提供的「选中状态」功能使得程序员可以使用 CSS 实现丰富的交互效果。

简介

「选中状态」是指当用户点击、鼠标悬浮或者通过键盘进行焦点切换时，某个元素的状态发生改变。在 Primer CSS 中，选中状态效果一般包括背景色、边框、外阴影和内阴影等多种表现形式。

Primer CSS 在选中状态方面提供了丰富的扩展，可以针对不同的界面元素，实现不同的选中状态。以下是一些常用的选中状态样式：

按钮

.btn:focus, .btn:hover {
  color: #fff;
  background-color: #0366d6;
  border-color: #0366d6;
}

链接

a:focus, a:hover {
  text-decoration: none;
}

文本框

.form-control:focus {
  border-color: #3274d6;
  box-shadow: 0 0 0 0.2rem rgba(50, 116, 214, 0.25);
}

单选框和复选框

.form-radio input[type="radio"]:focus + .btn::before,
.form-checkbox input[type="checkbox"]:focus + .btn::before {
  box-shadow: 0 0 0 1px #3274d6, 0 0 0 3px rgba(49, 109, 223, 0.3);
  background-color: #f6f8fa;
}

如何使用

在 Primer CSS 中使用选中状态样式，需要在 HTML 元素中添加特定的 class 名称，比如 .btn、.form-control、.form-radio 和 .form-checkbox 等。同时，需要在 CSS 文件中引入 Primer CSS 风格，依照界面需要定义相应的选中状态样式即可。

以下是使用 btn 样式定义按钮的选中状态的示例代码：

<button type="button" class="btn">Click Me!</button>

.btn:focus, .btn:hover {
  color: #fff;
  background-color: #0366d6;
  border-color: #0366d6;
}

总结

选中状态是 Web 界面中常用的交互效果，Primer CSS 提供了丰富的选中状态样式以及扩展功能，可以满足不同需求的开发者，可以提高界面交互性和美观性，使得用户体验更加流畅。