Question

我有一个相当简单的分段控制器式单选按钮设置。选择单选按钮后，该按钮会应用背景颜色。

如何在css中获取所选单选按钮的背景颜色？

像这样：

JSFiddle

input {
    display: none;
}
input:checked + .label {
    background-color: yellowGreen;
}

<label>
    <input type="radio" name="radioBtn" checked><span class="label">First Option</span>
</label>
<label>
    <input type="radio" name="radioBtn"><span class="label">Second Opetion</span>
</label>
<label>
    <input type="radio" name="radioBtn"><span class="label">Third Option</span>
</label>

更新

由于答案不足，我现在对JavaScript / JQuery持开放态度。虽然如果你有一个纯粹的CSS解决方案，请发布它。

Answer 1

好吧，纯CSS，似乎我回来晚了，还好不回来，JS Fiddle-Updated ^{（1）（2）}

更新代码：将z-index值添加到容器div#radios ^（3）

＆＃13;

body {
  background: #EEE url('//www.dailyfreepsd.com/wp-content/uploads/2013/09/underwater-blurred-background.jpg');
  background-size: cover;
}
#radios {
  position: relative;
  background-color: tomato;
  z-index: 5;
  width: 363px;
}
input {
  display: none;
}
#bckgrnd,
.labels {
  width: 120px;
  height: 30px;
  text-align: center;
  display: inline-block;
  padding-top: 10px;
  margin-right: -3px;
  z-index: 2;
  cursor: pointer;
  outline: 1px solid green;
}
#bckgrnd {
  background-color: orange;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
#rad1:checked ~ #bckgrnd {
  transform: translateX(0);
  transition: transform 0.5s ease-in-out;
}
#rad2:checked ~ #bckgrnd {
  transform: translateX(120px);
  transition: transform 0.5s ease-in-out;
}
#rad3:checked ~ #bckgrnd {
  transform: translateX(241px);
  transition: transform 0.5s ease-in-out;
}

＆＃13;

<div id="radios">
  <input id="rad1" type="radio" name="radioBtn" checked>
  <label class="labels" for="rad1">First Option</label>
  <input id="rad2" type="radio" name="radioBtn">
  <label class="labels" for="rad2">Second Option</label>
  <input id="rad3" type="radio" name="radioBtn">
  <label class="labels" for="rad3">Third Option</label>
  <div id="bckgrnd"></div>
</div>

＆＃13;

修改：

^（1）对于较小的屏幕，如果下面垂直显示这些无线电，则可以使用某个断点进行媒体查询，而不是translateX()使用translateY()。< / p>

^（2）我的下面的解决方案添加了一个div <div id="bckgrnd"></div>作为容器#radios div的最后一个子节点，您可以通过javascript / jquery添加，这样做你可以添加这个jquery：JS Fiddle 2-Updated

$(document).ready(function(){
    $('#radios').append('<div id="bckgrnd"></div>');
});

^（3）添加了z-index:;值只是为了确保#bckgrnd - z-index:-1 - body不会消失在#radios后面或者包含int i=jdbctemplate.update(.your db call..); div的任何元素。所以现在我们可以将背景图像设置为正文，将背景颜色设置为容器div，而不必担心它。Test JS Fiddle

Answer 2

这是件事。

label{
  position: relative;
  height:100%;
  display: block;
  height: 50px;
}

[type="radio"]{
  display: none;
  z-index: 5;
  position: relative;
}

[type="radio"] ~ span{
  transition: background .3s;
  height: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 0 25px;
  z-index: 5;
  position: relative;
}

.bg{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #7df5a7;
  top: 0;
  z-index: 0;
  left: 0;
  width: 0;
  transition: .3s width;
}

label:nth-child(1) .bg{
  right: 0;
  left: auto;
}

label:nth-child(2) .bg{
  left: 0;
}

[type="radio"]:checked + .bg{
  width: 100%;  
}

.wrap{
  border:1px solid #ddd;
  display: inline-flex;
  overflow:hidden;
  border-radius: 50px;
}

<div class="wrap">
  <label>
      <input type="radio" name="radioBtn" checked>
      <div class="bg"></div>
    <span class="label">First Option</span>
  </label>
  <label>
      <input type="radio" name="radioBtn">
          <div class="bg"></div>
  
    <span class="label">Second Option</span>
  </label>
</div>

Answer 3

[l1, l2, l3].forEach(function(x){
  x.onclick = function() {
    var r = x.getBoundingClientRect();
    bg.style.left = r.left - 12 + "px";
    bg.style.top = r.top - 10 + "px";
    bg.style.width = r.width + 8 + "px";
    bg.style.height = r.height + 4 + "px";
  };
});
l1.onclick();

#container { position: relative; }

input[type="radio"] { display: none; }
input[type="radio"]+label { display: inline-block; }

#bg { background-color: #0F0;
      position: absolute;
      transition: all 0.25s ease-in-out;
      border-radius: 1000px;
      z-index: -1; }

<div id="container">
  <div id="bg"></div>
  <input type="radio" id="opt1" name="grp1"><label id="l1" for="opt1">Option1</label>
  <input type="radio" id="opt2" name="grp1"><label id="l2" for="opt2">Option2</label>
  <input type="radio" id="opt3" name="grp1"><label id="l3" for="opt3">Option3 with a very long text</label>
</div>

Answer 4

这是一个使用JQuery的版本。它比其他答案稍微复杂一点，但大多数复杂性是由于我制作动画的方式。当突出显示发生变化时，它会延伸到新位置，然后收缩以适应。这不是你的模型所做的，但恕我直言，这是一个更平滑的效果。

很难解释，但是一个表明我的意思的JSFiddle。

http://jsfiddle.net/mcgraphix/4qe8uz06/9/

除了增加的亮点外，HTML几乎和你的一样：

<div>
    <label>
        <input type="radio" name="radioBtn" ><span class="label">First Option</span>
    </label>
    <label>
        <input type="radio" name="radioBtn" checked><span class="label">Second Option</span>
    </label>
    <label>
        <input type="radio" name="radioBtn"><span class="label">Third Option with a long label</span>
    </label>
    <span class="highlight"></span>
</div>

JS：

$(document).ready(function() {
    //handle to the highlight span
   var hl = $('.highlight');
   var initialLabel = $('input[name="radioBtn"]:checked').parent();
   //highlight the correct one initially in case it isn't the first one
   hl.css('width', initialLabel.css('width'));
hl.css('left', ( initialLabel.offset().left - $("label").first().offset().left) + 'px');

//add listeners
$("label").mouseup(function(event) {
   //figure out what we clicked on
   var selectedItem = $(this);
   //figure out where the left edge of it is
   var newLeft = (selectedItem.offset().left - $("label").first().offset().left);
   //how much do we need to change the left coordinate
   var changeAmount = Math.abs(parseInt(hl.css('left')) - newLeft);
   //figure out which direction we're going
   var direction = (parseInt(hl.css('left')) > newLeft) ? 'left' : 'right';
  //remove all the classes to start 
  hl.removeClass('grow-left').removeClass('grow-right').removeClass('shrink');
   //set up the new CSS
   var newCss;
   if (direction === 'right') {
       //we're growing to the right
       newCss = {
            width: selectedItem.width() + selectedItem.offset().left - hl.offset().left + 'px'
       };
       hl.addClass('grow-right');
   } else {
       //we're growing to the left
       newCss = {
           width: hl.width() + changeAmount + 'px',
           left: newLeft + 'px'
       };
       hl.addClass('grow-left');
   }
   //set the initial change
   hl.css(newCss);
   //wait for it to be done, then finish the change
   hl.on('transitionend webkitTransitionEnd oTransitionEnd', function () {  
       if (direction === 'right') {
           //we need to shrink to the right
           newCss = {width: selectedItem.css('width'), left: newLeft + "px"};
       } else {
           //we need to shrink to the left
           newCss = {width: selectedItem.css('width')}
       }
       //apply the right transition class
       hl.removeClass('grow-left').removeClass('grow-right').addClass('shrink');
       //apply the styles
       hl.css(newCss);
       //you could add a transitionend event listener to clean up the classes here
   });
 });
});

最重要的CSS样式是使用正确的缓和和延迟量应用转换的样式：

span.highlight.grow-left {
    transition: left 0.2s ease-in-out, width 0.2s ease-in-out;

}

span.highlight.grow-right {
    transition: width 0.2s ease-in-out, left 0.2s ease-in-out 0.2s;

}

span.highlight.shrink {
    transition: width 0.2s ease-in-out, left 0.2s ease-in-out;
}

这个要点就是有一个亮点＆＃34;标签后面。当您单击一个时，它会计算您单击的位置，并通过添加类来在正确的时间应用正确的动画，您将获得正确的动画＆＃34;变形＆＃34;

使用动画

JSFiddle

4 个答案: