Advanced Search

Return to Snippet

Revision: 59917
at October 9, 2012 10:39 by msstar
Initial Code 
.toggle { width:200px; position:relative; display:block; border:0; margin:0; padding:0; }  
.toggle label { position:relative; z-index:3; display:block; width:100%; padding:3px 0; cursor:pointer;}  
.toggle input { position:absolute; opacity:0; z-index:5; }  
.toggle input:focus ~ .toggle-button { outline:1px dotted #fff; }  
.toggle label:after { position:absolute; top:0; right:20px; z-index:0; display:block; width:80px; height:17px; background-color:#dd7e6d; border:1px solid #b15b4d; border-radius:2px; box-shadow:inset 0 1px 3px rgba(0,0,0,0.17), 0 1px 0 rgba(255,255,255,0.9); content:"No \a Yes"; white-space:pre; color:#8f5247; font-weight:700; text-align:center; text-shadow:0 1px 0 rgba(255,255,255,0.4); -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:0; -moz-column-gap:0; column-gap:0; padding:2px 0; }  
.toggle span { display:block; position:absolute; right:20px; top:-2px; z-index:4; width:40px; height:25px; border:1px solid #bbb; background-color:#f7f7f7; background-image:linear-gradient(top,#f7f7f7,#ececec); box-shadow:inset 0 1px 2px rgba(255,255,255,1), 0 1px 1px rgba(0,0,0,0.12); border-radius:2px; -webkit-transition:all .3s ease-out; -moz-transition:all .3s ease-out; -o-transition:all .3s ease-out; transition:all .3s ease-out; }  
.toggle input:checked ~ span { right:60px; }  
.toggle input:checked + label:after { background-color:#a0c66b; color:#60783f; border-color:#87aa5b; }

<!--[if IE 9]>
	<style type="text/css">
		.toggle label:after { position:absolute; top:0; right:20px; z-index:0; display:block; width:80px; height:17px; background-color:#dd7e6d; border:1px solid #b15b4d; border-radius:2px; box-shadow:inset 0 1px 3px rgba(0,0,0,0.17), 0 1px 0 rgba(255,255,255,0.9); content:"No	Yes"; white-space:pre; color:#8f5247; font-weight:700; text-align:center; text-shadow:0 1px 0 rgba(255,255,255,0.4); -webkit-column-count:2; -moz-column-count:2; column-count:2; -webkit-column-gap:0; -moz-column-gap:0; column-gap:0; padding:2px 0; }  
	</style>
<![endif]-->
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
Toggle approve button, compatible with IE9, not working in IE7 or below

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Toggle approve button

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
css

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
CSS