クロム関連のバグがあると思いますが、奇妙なことに、コードを変更せずに突然発生しました。選択したチェックボックスの値を jquery cookie で記憶するスクリプトを作成しました。これは機能しますが、何らかの理由で css に問題があります。チェックボックスをリロードすると、クロムでマウスオーバーするまでチェックボックスが間違ってチェックされます。Chrome バージョン 25.0.1364.45 ベータ版を使用しています。label:after セレクターが正しく機能していないのではないかと疑っています。Safari または firefox には、この動作はありません。
編集: さて、行に何か問題があると思います: input[type=checkbox]:checked + label:after
クロムのCSS3セレクターの問題に精通している人はいますか?
CSS:
.selectbox {
position: relative;
display: inline-block;
}
.selectbox input[type="checkbox"] {
visibility: hidden;
}
.selectbox label {
cursor: pointer;
position: absolute;
width: 15px;
height: 15px;
top: 0;
background: #fcfff4;
border: 1px solid #000;
text-indent: 30px;
white-space: nowrap;
font-family: @serif;
font-style: italic;
letter-spacing: 2px;
line-height: 17px;
}
.selectbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 6px;
height: 4px;
background: transparent;
top: 2px;
left: 3px;
border: 2px solid #333;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.selectbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.5;
}
.selectbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}