2016-03-11 73 views
1

显示类型的风格输入“复选框”和“无线电”如果他们是强制我创造了一些CSS信息:CSS伪选择::之前和之后::不会FF 44和IE11

input[type=checkbox].is-mandatory::before { 
 
    position: absolute; 
 
    left: -5px; 
 
    top: -5px; 
 
    border: solid 1px #A94442; 
 
\t border-radius: 4px; 
 
    width: 22px; 
 
    height: 22px; 
 
    content: ""; 
 
} 
 

 
input[type=checkbox].is-mandatory::after { 
 
    position: absolute; 
 
    left: -4px; 
 
    top: -4px; 
 
    border: solid 4px #F2DEDE; 
 
    border-radius: 4px; 
 
    width: 20px; 
 
    height: 20px; 
 
    content: ""; 
 
}
<div class="checkbox"> 
 
    <label> 
 
     <input class="is-mandatory" type="checkbox" id="chk0" name="chk0" value="0"> 
 
     A simple checkbox (mandatory) 
 
    </label> 
 
</div> 
 

 
<div class="radio"> 
 
    <label> 
 
     <input class="is-mandatory" type="radio" id="chk1" name="chk1" value="1"> 
 
     A radio (mandatory) 
 
    </label> 
 
</div>

不幸的是,似乎只显示在浏览器而不是FF44和IE11

styled checkbox and radio in chrome

在css声明中是否有一些缺失在IE和FF中像在Chrome中一样获得相同视图?

+1

http://stackoverflow.com/questions/3538506/which-elements-support-the-before-and-after-pseudo-elements的可能重复。伪元素不应该在'input'元素上工作。 – Harry

回答

0

请记住,当输入不能有:before和:after伪元素,该标签可。将您的标签设置为具有与您输入的名称/ ID相同的“for”属性,并且可能有助于解决一些问题。

+0

非常感谢。同时,我通过在输入的“