css 单选按钮的效果图

最新推荐文章于 2023-09-12 11:59:46 发布

飘零一落

最新推荐文章于 2023-09-12 11:59:46 发布

阅读量562

点赞数

分类专栏：前端 css

前端同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>form</title>
  <link href="css/common.css" rel="stylesheet" type="text/css">
  <style>
    body {
      font:  12px/22px "微软雅黑";
    }
    a {
      color: #000000;
      text-decoration: none;
    }
    .dispatch {
      width: 400px; 
      height: 32px; 
      border: 1px solid #dfdfdf;
      margin: 30px auto;
    }
    .dispatch dl {
      height: 32px;
      line-height: 32px;
      padding-left: 15px;

    }
    .dispatch dt {
      float: left;
    }
    .dispatch dd {
      float: left;
      margin: 0 10px 0 8px;
    }
    .dispatch dd a {
      display: block;
      position: relative;
      padding-left: 23px;
    }
    .dispatch dd a:hover {
      color: #CC0000;
      text-decoration: underline;
    }
    .dispatch dd b {
      display: block;
      width: 20px;
      height: 20px;
      background: url("img/radiobutton.gif") no-repeat -14px -18px;
      position: absolute;
      top: 6px;
      left: 0;
    }
    .dispatch dd a:hover b {
      background: url("img/radiobutton.gif") no-repeat -14px -118px;
    }
    .dispatch .selected b{
      background: url("img/radiobutton.gif") no-repeat -14px -218px;
    }
  </style>
  <script>
    function show(index) {
      var dd = document.getElementById("dispatch").getElementsByTagName('dd');
      for (var i =0; i<dd.length; i++) {
        if (i==index) {
          dd[i].className = "selected";
        } else {
          dd[i].className = "";
        }
      }
    }
  </script>
</head>
<body>
  <div class="dispatch">
    <!-- <form action="#" method="post" name="dispatchForm">
      <label>配送类型</label>
      <input type="radio" name="type" checked/><label>全部</label>
      <input type="radio" name="type" /><label>京东配送</label>
      <input type="radio" name="type" /><label>第三方配送</label>
    </form> -->
    <dl id="dispatch">
      <dt>配送类型:</dt>
      <dd class="selected"><a href="#" onclick="show(0)"><b></b>全部</a></dd>
      <dd><a href="#" onclick="show(1)"><b></b>京东配送</a></dd>
      <dd><a href="#" onclick="show(2)"><b></b>第三方配送</a></dd>
    </dl>
  </div>
</body>
</html>

飘零一落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 单选按钮的效果图

form body { font: 12px/22px “微软雅黑”; } a { color: #000000; text-decoration: none; } .dispatch { width: 400px; h...
复制链接

扫一扫