Search code examples
htmlcssinternet-explorercheckboxcompatibility

Checkbox does not display in IE (only)

I cannot get my checkbox to be displayed in Internet Explorer.
It works for all other web browsers, but only IE is failing to display it correctly.
Also it does work properly in my local machine folder, but it fails to display when it get opened from my folder in network (NAS) <- opened with IE.

Due to work related, it needs to be placed on the network. I have tested with Firefox 26.0 and IE 10.0.9

Here is my code:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11 DTD/xhtml11.dtd"><html xsi:schemalocation="http://www.w3.org 1999/xhtml http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" version="-//W3C//DTD XHTML 1.1//EN">

<head>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=windows-1252"/>
<style>
input[type=checkbox] {  
display: none;  
}   
.checkbox label:before {  
border-radius: 1px;  
border: 1px solid black
}  
input[type=checkbox]:checked + label:before {  
content: "X";  
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);  
font-size: 22px;  
color: #000000;  
text-align: center;  
line-height:19px;
border: 1px solid black
}  
label {  
display: inline-block;  
cursor: pointer;  
position: relative;  
padding-left: 25px;  
margin-right: 15px;  
font-size: 16px;  
font-weight: bold;
}  
label:before {  
content: "";  
display: inline-block;  


width: 15px;  
height: 15px;  

margin-right: 10px;  
position: absolute;  
left: 0;  
bottombottom: 1px;  
background-color: #eee;  
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);  
}      
</style>
</head>
<body>
<div class="checkbox"> <input type="checkbox" id="Field1" name="testINPUT" fieldname="Vote" mandatory="false" value="VoteYes" /> <label for="Field1">Yes</label></div>
<div class="checkbox"> <input type="checkbox" id="Field2" name="testINPUT" fieldname="Vote" mandatory="false" value="VoteNo" /> <label for="Field2">No</label> </div>

</body>
</html>
Solution

  • Worked fine for me with IE9 and above, as expected. Do you really need the conflicting doctype and head declarations? XML version is declaring UTF-8 and meta tag "charset=windows-1252" We try not to confuse browsers if we can help it.