综合编程

Checked input radio launch color transition in div (only css)

微信扫一扫,分享到朋友圈

Checked input radio launch color transition in div (only css)
0

So, here is the deal.. I have a simple radio and a hidden div

<input type="radio" name="picture" id="radio-id" selected="false">
<label id="label-id" for="radio-id"></label>
<div class="some-class">
</div>

with CSS:

.some-class{
 position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;        
    display:none;
    background: white;
    opacity: 0.7;
    -webkit-transition: all 1s linear;
       -moz-transition: all 1s linear;
        -ms-transition: all 1s linear;
         -o-transition: all 1s linear;
            transition: all 1s linear;
}
 #radio-id:checked ~ .some-class{
    display: block;
    background: rgb( 40, 44, 47 );
}

The problem here is that, when the radio is checked, there is no transition at all. The Div appears with the new background, but its not smoothly.

Problem courtesy of: Ivailo Petrov Ivanov

Solution

Replace the css with the following

#radio-id:checked ~ .some-class {
   display: block;
   background: rgb( 40, 44, 47 );
   position: fixed;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   opacity: 0.7;
   -webkit-transition: all 1s linear;
   -moz-transition: all 1s linear;
   -ms-transition: all 1s linear;
   -o-transition: all 1s linear;
   transition: all 1s linear;
}

Solution courtesy of: sree

Discussion

html

<html> 
<input type="radio" name="picture" id="radio-id" selected="false">
    <label id="label-id" for="radio-id"></label>
    <div class="some-class">
        hello
    </div>
</html>

Css

.some-class{
     position: fixed;
        top: 100px;
        left: 100px;
        height:100px;
        width: 100px;        
        display:none;
        background: white;
        opacity: 0.7;
        -webkit-transition: all 1s linear;
           -moz-transition: all 1s linear;
            -ms-transition: all 1s linear;
             -o-transition: all 1s linear;
                transition: all 1s linear;
    }
     #radio-id:checked ~ .some-class{
        display: block;
        background: rgb( 40, 44, 47 );
    }

Discussion courtesy of: Nitish Thakrar

This recipe can be found in it’s original form on Stack Over Flow
.

阅读原文...


微信扫一扫,分享到朋友圈

Checked input radio launch color transition in div (only css)
0

CSS3 Recipes

How to Keep Your Developers Happy

上一篇

Salesforce? Salesfarce: Cloud giant in multi-hour meltdown after database blunder grants us...

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Checked input radio launch color transition in div (only css)

长按储存图像,分享给朋友