CSS样式实现选择按钮

最新推荐文章于 2024-07-30 11:40:42 发布

zuci

最新推荐文章于 2024-07-30 11:40:42 发布

阅读量9.1k

点赞数 5

分类专栏： web 文章标签： css

本文链接：https://blog.csdn.net/u012780336/article/details/73924334

版权

本文介绍了如何使用CSS样式来优化和设计选择按钮，包括方形和圆形的选择按钮。提供了具体的CSS代码示例，帮助开发者在实际项目中提升表单元素的视觉效果。

摘要由CSDN通过智能技术生成

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>

.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%;