您好，我是 Silvana，一名前端开发工程师。

平时做网页时，默认的单选按钮总觉得少了点设计感，今天分享一个超简单的小技巧 —— 不用一行 JS，纯 HTML+CSS 就能做出带对勾、叉号的创意单选按钮，视觉效果精致，新手也能轻松上手。

这个小案例特别适合放在问卷调查、用户反馈这类场景里，替换掉单调的默认样式，让页面细节更出彩。下面是完整源码，每一行都加了注释，跟着敲一遍！

完整源码（带详细注释）

1. HTML 部分（index.html）

<!DOCTYPE html>
<!-- 声明文档类型为HTML5 -->
<html lang="en">
  <head>
    <!-- 设置字符编码为UTF-8，避免中文乱码 -->
    <meta charset="UTF-8" />
    <!-- 适配移动端，设置视口宽度为设备宽度，初始缩放比1.0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 页面标题 -->
    <title>创意单选按钮</title>
    <!-- 引入外部CSS样式文件 -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- 容器：用于居中展示内容 -->
    <div class="container">
      <!-- 提示文字 -->
      <p>Do you like it ?</p>
      <!-- Yes选项：结合单选框和自定义对勾样式 -->
      <label>
        <!-- 单选按钮，name统一为btn保证互斥选择 -->
        <input type="radio" name="btn">
        <!-- 对勾样式的容器 -->
        <span class="check"></span>
        Yes
      </label>
      <!-- No选项：结合单选框和自定义叉号样式 -->
      <label>
        <input type="radio" name="btn">
        <!-- 叉号样式的容器 -->
        <span class="cross"></span>
        No
      </label>
    </div>
  </body>
</html>

2. CSS 部分（style.css）

/* 全局样式重置：清除默认边距、内边距，设置盒模型为border-box（宽高包含边框） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 页面主体样式：弹性布局，内容水平+垂直居中，最小高度占满视口，背景色偏深 */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #1e2b3b;
}
/* 容器样式：相对定位，弹性布局且纵向排列 */
.container {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* 提示文字样式：白色、字体大小2em，底部间距10px */
p {
  color: #fff;
  font-size: 2em;
  margin-bottom: 10px;
}
/* label标签样式：相对定位，上下间距5px，鼠标移上去变手型，弹性布局垂直居中，字体大小2em，文字白色 */
label {
  position: relative;
  margin: 5px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 2em;
  color: #fff;
}
/* 隐藏原生单选按钮 */
label input {
  appearance: none;
}
/* 对勾/叉号的基础容器：相对定位，行内块级，宽高30px，右边距15px，过渡动画0.5秒 */
label span{
  position: relative;
  display: inline-block;
  width: 30px;
  height: 30px;
  margin-right: 15px;
  transition: 0.5s;
}
/* 对勾/叉号的横线样式：绝对定位，底部左对齐，宽100%高3px，白色，底部阴影模拟另一条横线（初始状态），过渡动画0.5秒 */
label span::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #fff;
  box-shadow: 0 -27px 0 #fff;
  transition: 0.5s;
}
/* 选中Yes时：对勾容器旋转+位移，形成对勾的视觉效果 */
label input:checked ~ span.check {
  transform: rotate(-45deg) translate(7px,-7px);
}
/* 选中Yes时：对勾横线变绿色，清除阴影 */
label input:checked ~ span.check::before {
  background: #0f0;
  box-shadow: 0 0 0 transparent;
}
/* 选中No时：叉号横线变红色，清除阴影，旋转+位移形成叉号的其中一条线 */
label input:checked ~ span.cross::before {
  background: #f00;
  box-shadow: 0 0 0 transparent;
  transform: rotate(-45deg) translate(10px,-9px);
}
/* 对勾/叉号的竖线样式：绝对定位，底部左对齐，宽3px高100%，白色，右侧阴影模拟另一条竖线（初始状态），过渡动画0.5秒 */
label span::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: #fff;
  box-shadow: 27px 0 0 #fff;
  transition: 0.5s;
}
/* 选中Yes时：对勾竖线高度减半、变绿色，清除阴影，完成对勾样式 */
label input:checked ~ span.check::after {
  height: 50%;
  background: #0f0;
  box-shadow: 0 0 0 transparent;
}
/* 选中No时：叉号竖线变红色，清除阴影，旋转+位移形成叉号的另一条线 */
label input:checked ~ span.cross::after{
  background: #f00;
  box-shadow: 0 0 0 transparent;
  transform: rotate(-45deg) translate(10px,10px);
}

小提示:
把这两个文件放在同一个文件夹里，直接打开 HTML 文件就能看到效果啦。如果想调整颜色、大小，只需要改 CSS 里对应的数值就行，比如把 #0f0（绿色）换成自己喜欢的颜色。

写着写着就到了结尾，祝您今晚有个好梦（代码少报错一点）。*

本文由mdnice多平台发布

posted on 2026-02-03 14:02 Silvana 阅读(2) 评论(0) 收藏举报

刷新页面返回顶部