CSS样式实现选择按钮_选中按钮的圈 css

作者：AllinToyou | 2024-03-23 19:27:26

踩

选中按钮的圈 css

CSS样式实现选择按钮

表单元素中的选择按钮的原生样式并不好看，在实际项目中需要优化。很多优化的方法都用CSS美化按钮的原生样式，或用图片来代替原生样式。本文描述了使用CSS样式实现方形选择按钮和圆形选择按钮的方法。

方形选择按钮

实现效果如下图：

由上图可以看出，这样的选择按钮非常适合用于类似“同意服务条款”这样的情景。以下是实现的代码，重点是css样式。

.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>选择按钮</title>
    <script src="radio/js/jquery.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="radio/css/aquareRadio.css" charset="utf-8">
</head>
<body>
    <div class="agree on">
        <p id="iAgree">我同意</p><span class="red">《xx服务条款》</span>
    </div>
    <!-- <div class="agree on">
        <p id="iAgree" class="red">我同意《xx服务条款》</p>
    </div>-->
    <script src="radio/js/radio.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.less

* {
  position: relative;
}
html {
  font-size: 10px;
}
body {
  width: 100%;
  min-width: 320px;
  max-width: 640px;
  margin: 0 auto;
  font: 1.2rem/1.5 "Helvetica Neue", Helvetica, STHeiTi, "Droid Sans Fallback", "Microsoft YaHei";
  background: #f1ffe3;
}
.transform-rotate (@deg) {
   
  -webkit-transform: rotate(@deg);
  -moz-transform: rotate(@deg);
  transform: rotate(@deg);
}
.arrow (@width, @height, @size, @rotate, @color) {
   
  content: "";
  position: absolute;
  width: @width;
  height: @height;
  top: 50%;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/297158