时间戳

首页 > 解决方案 > HTML 单选按钮，如条形图和相应标签，就像 X 轴名称一样位于它们的右下方

html - HTML 单选按钮，如条形图和相应标签，就像 X 轴名称一样位于它们的右下方

问题描述

我想使用单选按钮实现 HTML 条，并使它们的标签出现在x-axis下。我还想维护锁定/解锁图标，如下面的代码所示。我试图查看这些答案 Creating interactive bar chart with only HTML and CSS and How to style a radio button to look like a regular Learn More Button但即使在我尝试之后也无法获得整个解决方案。这是我写的代码和预期的结果。选中后，按钮颜色应变为绿色。我正在使用引导程序。请有人帮助我。

这是预期的结果

.team-bar {
         /*list-style-type:none;
         margin:25px 0 0 0;
         padding:0; */
    }

    .team-bar .teama {
        float: left;
        margin: 0;
        width: 150px;
        height: 350px;
        position:relative;
    }

    .team-bar .lock-unlock-img, .team-bar input {
        display: block;
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
    }

    .team-bar input[type="radio"] {
        opacity:0.011;
        z-index:100;
    }

    /*.team-bar .checked{
        background:yellow;
    }*/

    .team-bar .lock-unlock-img {
         padding:5px;
         border:1px solid #CCC; 
         cursor:pointer;
        z-index:90;
    }

    .team-bar .lock-unlock-img:hover {
         background:#DDD;
    }
<!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="//adminlte.io/themes/v3/plugins/fontawesome-free/css/all.min.css">
   <!-- Theme style -->
  <link rel="stylesheet" href="//adminlte.io/themes/v3/dist/css/adminlte.min.css"> 
  
 <div class="container">
      <div class="row">
        <div class="team-bar">
            <div class="col-md-1 center teama" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 1</label>     
                    </p>
                </div>
            </div>
            <div class="col-md-1 center teama" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 2</label>     
                    </p>
                </div>
            </div>
            <div class="col-md-1 center teama btn-success" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 3</label>     
                    </p>
                </div>
            </div>
            <div class="col-md-1 center teama" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 4</label>     
                    </p>
                </div>
            </div>
            <div class="col-md-1 center teama" style="display: inline !important;">
                <div class="inner text-center">
                    <p class="radios" style="display: inline !important;">
                        <input id="radio" type="radio" class="radio-inline" value="" name="assetvalue">
                        <div class="lock-unlock-img">
                            <b class="float-left" alt="left"> <i class="fa fa-lock  text-danger"></i></b>
                            <b class="float-right" alt="left"> <i class="fa fa-unlock text-success"></i></b>
                        </div>
                        <label class="radio bg-primary1  text-center" for="radio" style="display: inline-block !important;"> Team 5</label>     
                    </p>
                </div>
            </div>
        </div>
      </div>
    </div>

标签： htmljquerycss

解决方案

我为每个单选按钮创建了一个样式来实现你想要的。

每个单选按钮

  • 容器：标签用作容器，以使整个区域可点击
  • element1：输入本身
  • element2：每个栏的图标行
  • element3：条形彩色矩形
  • element4：栏的标签

我不确定颜色的逻辑，所以我试着让它和你的图片一样。

<label for="team1" class="bar">
  <input type="radio"
         id="team1"
         name="team"
         value="team1"
         checked
  >
  <div class="icons-bar">
    <i class="fa fa-lock  text-danger"></i>
    <i class="fa fa-unlock text-success"></i>
  </div>
  <div class="chart-value"></div>
  <div class="legend">Team 1</div>
</label>

造型

根据是否检查输入，我正在更改栏的高度。在我的解决方案中，我对所有条形使用相同的高度，但这很容易改变。就像我为每个条形定义颜色一样，您可以根据所选状态对条形的高度执行相同的操作。

重要的部分是使用~选择器，它是Subsequent-sibling 组合器

通用兄弟组合符由分隔两个简单选择器序列的“波浪号”（U+007E，~）字符组成。由两个序列表示的元素在文档树中共享相同的父元素，并且由第一个序列表示的元素在（不一定立即）由第二个序列表示的元素之前。

input:checked ~ .chart-value {
  height: 100%;
}


html,
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: #f5f5dc;
}

.kb-checkbox-as-chart {
  --chart-height: 250px;
  --chart-color1: hsl(141, 53%, 53%);
  --chart-color2: hsl(141, 53%, 53%);
  --chart-color3: hsl(141, 53%, 53%);
  --chart-color4: hsl(141, 53%, 53%);
  --chart-color5: hsl(141, 53%, 53%);
  --lock-color: hsl(348, 100%, 61%);
  --unlock-color: hsl(141, 53%, 53%);
  --unlock-selected-color: hsl(48, 100%, 67%);
  display: flex;
  height: var(--chart-height);
  padding-bottom: 1em;
  border: 1px solid grey;
}

.kb-checkbox-as-chart .bar {
  margin: 0 0.3em;
  padding: 0.5em 0.5em 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.kb-checkbox-as-chart .bar .legend {
  font-weight: bold;
}

.kb-checkbox-as-chart .bar .icons-bar {
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  position: absolute;
  padding: 0.8em;
}

.kb-checkbox-as-chart .bar .icons-bar .fa-lock {
  color: var(--lock-color);
}

.kb-checkbox-as-chart .bar .icons-bar .fa-unlock {
  color: var(--unlock-color);
}

.kb-checkbox-as-chart .bar .chart-value {
  height: 20px;
  width: 95%;
  background: var(--chart-color1);
  transition: height 250ms;
}

.kb-checkbox-as-chart input:checked~.icons-bar .fa-unlock {
  color: var(--unlock-selected-color);
}

.kb-checkbox-as-chart input:checked~.chart-value {
  height: 100%;
}

.kb-checkbox-as-chart input#team2~.chart-value {
  background-color: var(--chart-color2);
}

.kb-checkbox-as-chart input#team3~.chart-value {
  background-color: var(--chart-color3);
}

.kb-checkbox-as-chart input#team4~.chart-value {
  background-color: var(--chart-color4);
}

.kb-checkbox-as-chart input#team5~.chart-value {
  background-color: var(--chart-color5);
}

.kb-checkbox-as-chart input[type=radio] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
<link href="https://pro.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<div class="kb-checkbox-as-chart">
  <label for="team1" class="bar">
    <input type="radio" id="team1" name="team" value="team1"
           checked>
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 1</div>
  </label>

  <label for="team2" class="bar">
    <input type="radio" id="team2" name="team" value="team2">
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 2</div>
  </label>

  <label for="team3" class="bar">
    <input type="radio" id="team3" name="team" value="team3">
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 3</div>
  </label>

  <label for="team4" class="bar">
    <input type="radio" id="team4" name="team" value="team4">
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 4</div>
  </label>

  <label for="team5" class="bar">
    <input type="radio" id="team5" name="team" value="team5">
    <div class="icons-bar">
      <i class="fa fa-lock  text-danger"></i>
      <i class="fa fa-unlock text-success"></i>
    </div>
    <div class="chart-value"></div>
    <div class="legend">Team 5</div>
  </label>
</div>

推荐阅读