html - avoid css hack for IE8 checkbox -

-

i'm using css3 style checkbox site (slide three)

html:

<div class="slidethree">         <input type="checkbox" id="slidethree" name="check" />          <label for="slidethree"></label> </div>

css:

input[type=checkbox] {     visibility: hidden; }  /* slide 3 */ .slidethree {     width: 91px;     height: 26px;     background: #2b3d61;     margin: 5px;      -webkit-border-radius: 50px;     -moz-border-radius: 50px;     border-radius: 50px;     position: relative;      -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);     -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2);     box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,0.2); }  .slidethree:after {     content: 'off';     font: 14px/26px arial, sans-serif;     color: #fff;     position: absolute;     right: 10px;     z-index: 0;     font-weight: bold;     text-shadow: 1px 1px 0px rgba(255,255,255,.15); }  .slidethree:before {     content: 'on';     font: 14px/26px arial, sans-serif;     color: #fff;     position: absolute;     left: 10px;     z-index: 0;     font-weight: bold; }  .slidethree label {     display: block;     width: 45px;     height: 24px;      -webkit-border-radius: 50px;     -moz-border-radius: 50px;     border-radius: 50px;      -webkit-transition: .4s ease;     -moz-transition: .4s ease;     -o-transition: .4s ease;     -ms-transition: .4s ease;     transition: .4s ease;     cursor: pointer;     position: absolute;     top: 1px;     left: 3px;     z-index: 1;      -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);     -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);     box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3);     background: #fcfff4;      background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);     background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);     background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);     background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);     background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#fcfff4', endcolorstr='#b3bead',gradienttype=0 ); }  .slidethree input[type=checkbox]:checked + label {     left: 44px; }

ie8 doesn't support here. edit i've have doctype , i've removed z-index changed nothing. checkbox still doesn't work. there way around or need use conditional css in html? if degrades simple checkbox fine ie8.

the way around create additional classname :after , :before declarations , use javascript add/remove these classes based on events.


Comments

Post a Comment

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused...
Read more

What is the difference between data design and data model(ERD) -

-
i have google question , find answer in day. know, data design many many table have list column,and mark pk , fk. why er-diagram have find this? data design process of designing database. main output of data design detailed logical data model of database. some people data design includes of needed logical , physical design choices , physical storage parameters needed generate design in data definition language. technically, database analysis, database analysts (dbas) trained do. while person can both data design , database analysis, these 2 different tasks. data design models data. database analysis takes model , applies 1 or more database engines (relational, hierarchical, nosql). a logical data model 1 of main outputs of data design. data model represented entity relationship diagram, or er diagram.
Read more

ios - Can NSManagedObject conform to NSCoding -

-
i need transfer single object across device. right converting nsmanagedobject dictionary , archiving , sending nsdata. upon receiving unarchiving it. transfer nsmanagedobject archiving , unarchiving instead of creating intermediate data object. @interface test : nsmanagedobject<nscoding> @property (nonatomic, retain) nsstring * title; @end @implementation test @dynamic title; - (id)initwithcoder:(nscoder *)coder { self = [super init]; if (self) { self.title = [coder decodeobjectforkey:@"title"]; //<crash } return self; } - (void)encodewithcoder:(nscoder *)coder { [coder encodeobject:self.title forkey:@"title"]; } @end nsdata *archivedobjects = [nskeyedarchiver archiveddatawithrootobject:testobj]; nsdata *objectsdata = archivedobjects; if ([objectsdata length] > 0) { nsarray *objects = [nskeyedunarchiver unarchiveobjectwithdata:objectsdata]; } the problem above code is. crashes @ self.title in initwithcoder sa...
Read more