CSS样式实现选择按钮

秒速五厘米 2022-06-13 06:24 343阅读 0赞

## CSS样式实现选择按钮 ##

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

--------------------

1.  **方形选择按钮**
    
    实现效果如下图：  
    ![这里写图片描述][SouthEast]

由上图可以看出，这样的选择按钮非常适合用于类似“同意服务条款”这样的情景。以下是实现的代码，重点是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>
        
        <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%;
      border-top: @size solid @color;
      border-left: @size solid @color;
      .transform-rotate(@rotate);
    }
    @red:#DC1E32;
    .red {
      color: #DC1E32;
    }
    .agree {
       //此处重点
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      line-height: 1.5rem;
      background: white;
      p {
        display: inline-block;
        padding-left: 2rem;
      }
      p:before {
        content: "";
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        top: 50%;
        left: 0;
        margin-top: -.7rem;
        border: .1rem solid @red;
      }
      &.on p:after {
        .arrow(.4rem, .7rem, .15rem, 225deg, @red);
        left: .45rem;
        margin-top: -.62rem;
      }
    }

.css （由.less编译为.css的方法见上一篇文章[WebStorm自动编译less][WebStorm_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; }
    .red { color: #DC1E32; }
    .agree { position: fixed; bottom: 0; width: 100%; text-align: center; line-height: 1.5rem; background: white; }
    .agree p { display: inline-block; padding-left: 2rem; }
    .agree p:before { content: ""; position: absolute; width: 1.2rem; height: 1.2rem; top: 50%; left: 0; margin-top: -0.7rem; border: 0.1rem solid #DC1E32; }
    .agree.on p:after { content: ""; position: absolute; width: 0.4rem; height: 0.7rem; top: 50%; border-top: 0.15rem solid #DC1E32; border-left: 0.15rem solid #DC1E32; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); transform: rotate(225deg); left: .45rem; margin-top: -0.62rem; }

.js

下面介绍下圆形选择按钮的实现方法

--------------------

1.  **圆形选择按钮**  
    实现效果如下图：  
    ![这里写图片描述][SouthEast 1]

只需用以下的样式，替换到上面的.less .css文件即可实现圆形选择按钮的效果。

.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%;
      border-top: @size solid @color;
      border-left: @size solid @color;
      .transform-rotate(@rotate);
    }
    @red:#DC1E32;
    .red {
      color: #DC1E32;
    }
    .agree {
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      line-height: 1.5rem;
      background: white;
      p {
        display: inline-block;
        padding-left: 2rem;
      }
      p:before {
        content: "";
        position: absolute;
        width: 1.2rem;
        height: 1.2rem;
        top: 50%;
        left: 0;
        margin-top: -.7rem;
        background: #B9BCBE;
        border: .1rem solid #B9BCBE;
        border-radius: 50%;
      }
      &.on p:before {
        background: @red;
        border: .1rem solid @red;
      }
      &.on p:after {
        .arrow(.4rem, .7rem, .15rem, 225deg, white);
        left: .45rem;
        margin-top: -.62rem;
      }
    }

.css

* { 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; }
    .red { color: #DC1E32; }
    .agree { position: fixed; bottom: 0; width: 100%; text-align: center; line-height: 1.5rem; background: white; }
    .agree p { display: inline-block; padding-left: 2rem; }
    .agree p:before { content: ""; position: absolute; width: 1.2rem; height: 1.2rem; top: 50%; left: 0; margin-top: -0.7rem; background: #B9BCBE; border: .1rem solid #B9BCBE; border-radius: 50%; }
    .agree.on p:before { background: #DC1E32; border: 0.1rem solid #DC1E32; }
    .agree.on p:after { content: ""; position: absolute; width: 0.4rem; height: 0.7rem; top: 50%; border-top: 0.15rem solid white; border-left: 0.15rem solid white; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); transform: rotate(225deg); left: .45rem; margin-top: -0.62rem; }

[SouthEast]: /images/20220613/95be417f68854961926a69aab2320d59.png
[WebStorm_less]: http://blog.csdn.net/u012780336/article/details/73287500
[SouthEast 1]: /images/20220613/a59a85e3c2b14c3a808f08e7d7bfc10e.png