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