CSS：切换

时，这是我的代码来切换元件CSS：切换

<label style="float:right" class="toggle toggle-assertive"> 
      <input type="checkbox" ng-model="checkModel"> 
      <div class="track"> 
       <div class="handle"></div> 
      </div> 
</label>

这是上面的代码的输出。当该复选框被切换，背景元素更改肘节式元件的背景颜色如图所示变为红色现在我希望背景变为蓝色切换的时候，所以我有这样的代码

#trackBack { 
background-color:#0000FF; 
border:0; 
}

上应用在上面的CSS代码中，无论是否切换，背景都会变为蓝色。如下图所示

我现在面临的挑战是如何才能使背景仅在切换时变为蓝色。请协助

来源

2016-02-02 Blaze

您可以采取以下方法。

Working Fiddle

.onoffswitch { 
 
     position: relative; width: 60px; 
 
     -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
 
    } 
 
    .onoffswitch-checkbox { 
 
     display: none; 
 
    } 
 
    .onoffswitch-label { 
 
     display: block; overflow: hidden; cursor: pointer; 
 
     height: 36px; padding: 0; line-height: 36px; 
 
     border: 2px solid #CCCCCC; border-radius: 36px; 
 
     background-color: #FFFFFF; 
 
     transition: background-color 0.3s ease-in; 
 
    } 
 
    .onoffswitch-label:before { 
 
     content: ""; 
 
     display: block; width: 36px; margin: 0px; 
 
     background: #FFFFFF; 
 
     position: absolute; top: 0; bottom: 0; 
 
     right: 22px; 
 
     border: 2px solid #CCCCCC; border-radius: 36px; 
 
     transition: all 0.3s ease-in 0s; 
 
    } 
 
    .onoffswitch-checkbox:checked + .onoffswitch-label { 
 
     background-color: #0000FF; 
 
    } 
 
    .onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before { 
 
     border-color: #0000FF; 
 
    } 
 
    .onoffswitch-checkbox:checked + .onoffswitch-label:before { 
 
     right: 0px; 
 
    }

<div class="onoffswitch"> 
 
     <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked> 
 
     <label class="onoffswitch-label" for="myonoffswitch"></label> 
 
    </div>

Reference link

来源

2016-02-02 10:40:40 ketan

当你使用jQuery比你可以使用toggleClass功能。这会更改所选html项目的类别。

这是的jQuery代码：

$(document).ready(function(){ 
    $("button").click(function(){ 
     $("p").toggleClass("main"); 
    }); 
});

这里的HTML代码：

<body> 

<button>Toggle class "main" for p elements</button> 

<p>This is a paragraph.</p> 
<p>This is another paragraph.</p> 
<p><b>Note:</b> Click the button more than once to see the toggle effect.</p> 

</body>

和CSS：

.main { 
    font-size: 120%; 
    color: red; 
}

这里是一个的jsfiddle玩附： JSFiddle

来源

2016-02-02 10:47:36

回答

相关问题