css实现好看的单选按钮和复选框

最新推荐文章于 2022-10-27 17:39:45 发布

star_xing123

最新推荐文章于 2022-10-27 17:39:45 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html css 单选框复选框

本文链接：https://blog.youkuaiyun.com/star_xing123/article/details/99971918

html 专栏收录该内容

2 篇文章

订阅专栏

本文展示了如何使用CSS来实现美观的单选按钮和复选框效果，通过代码实例详细阐述了定制过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如图片所示：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*复选框*/
.gcs-checkbox {
  display: none;
}
.gcs-checkbox+label {
  background-color: white;
  border-radius: 0px;
  border: 1px solid #d3d3d3;
  width: 20px;
  height: 20px;
  display: inline-block;
  text-align: center;
  vertical-align: bottom;
  line-height: 20px;
}
.gcs-checkbox+label:hover {
  cursor: pointer;
  border: 1px solid #2783FB;
}
.gcs-checkbox:checked+label {
  background-color: #eee;
  background: #2783FB;
}
.gcs-checkbox:checked+label:after {
  content: "\2714";
  color: white;
}
/*单选按钮*/
.gcs-radio {
 display: none;
}
.gcs-radio+label {
  width: 20px;
  height: 20px;
  line-height: 20px;
  display: inline-block;
  text-align: center;
  vertical-align: bottom;
  border: 1px solid gray;
  border-radius: 50%;
}
.gcs-radio+label:hover {
  border: 1px solid #2783FB;
  cursor: pointer;
}
.gcs-radio:checked+label {
  background: #2783FB;
  border: 1px solid #2783FB;
}
.gcs-radio:checked+label:after {
  content: "\2022";
  font-size: 35px;
  color: white;
}
</style>
<body>
<h2>复选框</h2>
<div>
   计算机<input type="checkbox" id="计算机" class="gcs-checkbox">
        <label for="计算机"></label> 
   C语言<input type="checkbox" id="C语言" class="gcs-checkbox">
         <label for="C语言"></label>
   Java<input type="checkbox" id="Java" class="gcs-checkbox">
   <label for="Java"></label> 
  PHP<input type="checkbox" id="PHP" class="gcs-checkbox">
          <label for="PHP"></label>
</div> <br />
<hr />
<h2>单选按钮</h2>
<div>
  男<input type="radio" name="sex" class="gcs-radio" id="男" />
     <label for="男"></label> 
 女<input type="radio" name="sex" class="gcs-radio" id="女" />
     <label for="女"></label>
</div>
<hr />
</body>
</html>

谢谢，ALL！